日期:2012-8-14 来源:GBin1.com
在线演示
本地下载
随着科技的进步,越来越多的javascript类库开发出了面对移动设备的类库,例如,jQuery Mobile,Secha touch等, 随着Dojo
最新版本1.7的发布,同样的也带来了Dojo
版
本的移动开发框架Dojox/mobile。这套框架使用基于controller和CSS3主题的架构,帮助你快速的开发智能,灵活并且跨平台的移动设
备web应用。在今天我们这篇文章,将介绍如何使用Dojox/mobile来开发一个简单的移动网站应用。记得前段时间我们发布的使用jQuery创建iphone风格的导航
吧, 这里我们使用dojox/mobile也实现一个类似的效果。
关于dojox/mobile
相关特性:
- 轻量级,依赖性非常小
- 提供了iOS,Andriod和Blackberry的主题可供你选择
- 使用基于CSS3的动画来展示
- 提供了iOS,Andriod和Blackberry不同风格的组件
- 如果不支持CSS3的话,会使用javascript作为fallback
- 支持横竖屏幕切换
- 完整的组件支持,无须其它
- 新加入Dojo1.7中,最棒的地方在于能够自动侦测客户端并且显示正确的主题,当然你可以关闭这个功能
- 新加入Dojo1.7中一些组件,提示条,悬浮窗口,组合框,可扩展textarea,分页,滑动块等,完整信息请查看:http://livedocs.dojotoolkit.org/releasenotes/1.7#mobile
主要页面结构
和一般web应用类似,dojox/mobile也精心设计了相关结构。包括:
代码结构如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>dojox/mobile Demo</title>
<!-- dojo javascript code and CSS code -->
</head>
<body>
<!-- mobile应用内容 -->
</body>
</html>
接下来我们添加dojo js,如下:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require([
"dojox/mobile/parser", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/compat", "dojo/domReady!"], function
(parser) {
parser.parse();
});
</script>
以上代码中,我们引用了dojo类库,并且使用AMD方法,加载了dojox/mobile和相关其它类库。
其
中dojox/mobile/parser和dojox/mobile是必须包含的。
其次加载了dojox/mobile/deviceTheme,用来生成不同主题。最后我们加载dojox/mobile/compact,使用它来保证
如果不支持css3动画,将使用javascript来替代,这个不是必须要的,但是为了不同设备的兼容性,我们还是需要添加。
视图和组件处理如下:
- View是类似页面的定义
- Scrolling view是可滚动的页面
- Button:按钮
- Listitem:列表内容
- Switch:开关组件
- 更多请查看文档
下面代码我们创建了一个简单view:
<div id="home" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">
<h1 data-dojo-type="dojox.mobile.Heading">Dojo/Mobile GBin1.com</h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'article'">
最新文章
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'tutorial'">
专题教程
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'technology'">
技术开发
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'icon'">
设计素材
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg'">
阅读配置
<div class="mblItemSwitch" data-dojo-type="dojox.mobile.Switch"></div>
</li>
</ul>
</div>
......
......
来源:使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用
分享到:
相关推荐
Dojo 1.7 中文版本注释功能说明,以Dojo使用案例,很经典,做为系统了解Dojo功能及用法很有用!
Dojo1.7 Api chm 英文版
Dojo 1.7 版本注释 非常全面 收集了很就在这里和大家共享。共同学习。
Dojo开发包: 包含以下目录dijit dojo dojox util
最新dojo包,内含最新的实例若干个。是入门学习的好帮手!
Dojo Mobile 是基于 Dojo 的小部件集合,用于创建移动 Web 应用程序。使用 Dojo Mobile,您可以开发轻量级、高性能的移动 Web 应用程序
使用方便,无需安装配置, 下载置入dojo源码下的任意目录即可一键完成打包压缩. 该工具可自动分析HTML文件生成打包方案,自动排除没有用到的js文件,可将dojo压缩到数百K大小. 自带支持高亮、代码提示的profile编辑器,...
dojo 源码1.7汇总 包括dijit 和 dojo 打包汇总 非常好的
用DOJO中的dojox.gfx做甘特图 用DOJO中的dojox.gfx做甘特图
文件解压后,在目录 dojo/dojox/gfx/ 中 ,关于如何用这个例子,轻参考我的百度: http://hi.baidu.com/w2y0xy0sf5z/blog/item/a03bb6ecabcd90d92f2e210d.html
Include <SCRIPT TYPE="text/javascript" SRC="dojo/dojo.js"></SCRIPT> and you're on your way. Browse to dojo/tests/runTests.html or dijit/themes/themeTester.html to see Dojo in action
NULL 博文链接:https://mojianpo.iteye.com/blog/753665
dojo-smore: S'more 道场商店概述这个包包含一些... RequestMemory扩展了dojo/store/Memory ,添加了对url属性(和setUrl方法)的支持,它将使用dojo/request商店的数据。 有关更多详细信息,请参阅相应模块中的 dojo-
其中 Dojo 是核心功能包 , Dijit 中存放的是 Dojo 所有的Widget 组件,而 DojoX 则是一些扩展或试验功能,DojoX 中的试验功能在成熟之后有可能在后续版本中移入到 Dojo 或 Dijit 命名空间中。列举了常用的一些包及其...
dojo 开发指南, 讲述如何用dojo技术构建web应用
使用_Dojo_的_Ajax_应用开发进阶教程
Java Web开发实例大全(提高卷)筛选、汇集了Java Web开发从基础知识到高级应用各个层面的大量实例及源代码,共有600个左右,每个实例及源代码按实例说明、关键技术、设计过程、详尽注释、秘笈心法的顺序进行了分析...
这是以前的 dojox/color 项目(ColorModel 部分)的子集,添加了 dojo/_base/Color 和 dojo/colors 模块。 从 dojox/color 到 dcolor 的迁移步骤: 将“dojo/_base/Color.blendColors”的任何使用替换为“dcolor/...
ATF开发 Dojo 应用,ATF开发 Dojo 应用
Java Web开发实例大全(提高卷)筛选、汇集了Java Web开发从基础知识到高级应用各个层面的大量实例及源代码,共有600个左右,每个实例及源代码按实例说明、关键技术、设计过程、详尽注释、秘笈心法的顺序进行了分析...