日期: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应用
分享到:
相关推荐
9. **dojo/i18n**: 国际化支持是Dojo的一个重要特性,`dojo/i18n`模块帮助开发者轻松地为应用添加多语言支持。 10. **dojo/request**: Dojo 1.7 包含了`dojo/request`模块,用于处理HTTP请求,如GET、POST、PUT、...
总的来说,Dojo 1.7的AMD支持和模块拆分带来了更高效、灵活的开发体验,同时也需要注意与旧版本的兼容性和特定模块的使用方式。开发者应确保了解并适当地调整代码以利用这些新特性。对于遇到的兼容性问题,可以关注...
《Dojo 1.7 API CHM:深入理解与应用》 Dojo 是一个功能强大的JavaScript工具库,尤其在Web开发领域,它提供了一系列高级功能,包括模块化、数据管理、用户界面构建以及Ajax交互等。Dojo 1.7 API CHM文件是针对这个...
Dojo 是一个强大的JavaScript 库,它为Web 开发提供了丰富的功能和工具,尤其是在构建复杂的、可维护的、高性能的富互联网应用(RIA)时。Dojo 1.7 版本是其历史上的一个重要里程碑,引入了许多改进和优化,包括模块...
《dojo toturial with design best practise》是一本深入探讨Dojo框架并结合设计模式实践的书籍。这本书旨在帮助开发者不仅掌握Dojo库的基本...通过学习和实践书中的例子,你将能够更好地应对复杂的Web应用开发挑战。
Dojo Mobile适合于创建轻量级且高性能的移动Web应用,它封装了许多常用的UI控件,这些控件针对移动设备进行了优化,能够提供良好的触摸体验,并且具有较高的响应速度。 开发者在使用Dojo Mobile进行开发时,会遇到...
10. **移动开发**:虽然Dojo 1.10.4主要是为桌面环境设计的,但`dojox/mobile`提供了一些适用于移动设备的功能,如滚动列表、下拉菜单等,以适应移动Web开发的需求。 总的来说,"dojo-release-1.10.4"是一个全面的...
解压后,你可以通过Dojo的加载器(dojo/require, dojo/ready等)来引入和使用这些模块,从而构建功能完善的Web应用程序。在使用前,确保阅读官方文档以了解如何正确配置和使用Dojo框架,以便充分利用其强大功能。
数据管理在Dojo 中由dojo/store 和dojox/data 提供支持。它们定义了数据存储和检索的接口,可以与各种数据源(如JSON、XML或数据库)交互。`dojo/store/Memory`是一个简单的内存中数据存储,而`dojo/data/...
标题中的“多文件上传 dojo组件 dojox.form.FileUploader”是指使用Dojo JavaScript库中的dojox.form.FileUploader组件来实现网页上的多文件上传功能。Dojo是一个强大的JavaScript框架,它提供了丰富的UI组件和工具...
5. **dojo/store和dojo/data**:这两者是Dojo的数据存储抽象层,`dojo/store`适用于现代Web应用,而`dojo/data`则用于较早的Dojo版本。它们提供了数据获取、查询和更新的接口,可以和各种数据源(如JSON、XML)配合...
6. 登录状态保持:如果登录成功,可能需要在客户端存储用户信息,例如使用dojo/store/Memory或dojox/data/ItemFileWriteStore来存储用户会话数据,并用dojo/cookie或dojo/storage来持久化登录状态。 7. 安全性考虑...
`dojo/i18n`模块支持应用程序的国际化和本地化,允许开发者轻松地根据用户的语言和地区调整文本、日期格式等。 8. **工具链与构建** `dojo`的构建工具可以优化和压缩源代码,减少HTTP请求,提高应用性能。此外,...
这些示例将展示如何利用DojoX进行更复杂的应用开发。 5. **Dojo XHR与Ajax**:Dojo提供了xhr函数,如`dojo/xhrGet`和`dojo/xhrPost`,用于处理AJAX请求。通过实例,你可以了解如何使用这些函数与其他服务器进行数据...
Dojo还支持响应式设计,通过使用dojox/mobile/View或dojox/mobile/SwapView等移动布局组件,可以确保你的应用在手机和平板设备上同样具有良好的表现。Dojo的`dojox/layout/ResponsiveGridLayout`组件则可以根据屏幕...
`dojox/testing` 提供了单元测试框架,而 `dojo/_base/xstyle` 和 `dojo/_base/sniff` 可以帮助开发者编写适应不同浏览器和设备的代码。 通过深入学习和分析这个压缩包中的源代码和示例,你不仅可以掌握 Dojo 的...
使用方便,无需安装配置, 下载置入dojo源码下的任意目录即可一键完成打包压缩. 该工具可自动分析HTML文件生成打包方案,自动排除没有用到的js文件,可将dojo压缩到数百K大小. 自带支持高亮、代码提示的profile编辑器,...
在使用 Dojo 开发的应用中,经常会遇到与数据网格(grid)相关的功能需求。其中 `dojox/grid` 是 Dojo 提供的一组用于实现高级数据网格的功能库。 本文将针对一个具体的 bug 进行分析,并给出修复方案。该 bug 主要...
`dojo/request`是Dojo 1.7引入的新API,它对xhr进行了封装,提供了更简洁的接口。 在实际开发中,Dojo的工具集如Build System也十分有用。它允许开发者对项目进行优化,包括合并、压缩和混淆JavaScript及CSS文件,...