最新版Dojo17的dojox-mobile开发移动设备web应用.docVIP

在线演示 ? 本地下载 随着科技的进步，越来越多的javascript类库开发出了面对移动设备的类库，例如，jQuery Mobile，Secha touch等， 随着Dojo最新版本1.7的发布，同样的也带来了Dojo版本的移动开发框架Dojox/mobile。这套框架使用基于controller和CSS3主题的架构，帮助你快速的开发智能，灵活并且跨平台的移动设备web应用。 在今天我们这篇文章，将介绍如何使用Dojox/mobile来开发一个简单的移动网站应用。记得前段时间我们发布的使用jQuery创建iphone风格的导航吧， 这里我们使用dojox/mobile也实现一个类似的效果。 关于dojox/mobile 相关特性： 1.轻量级，依赖性非常小 2.提供了iOS，Andriod和Blackberry的主题可供你选择 3.使用基于CSS3的动画来展示 4.提供了iOS，Andriod和Blackberry不同风格的组件 5.如果不支持CSS3的话，会使用javascript作为fallback 6.支持横竖屏幕切换 7.完整的组件支持，无须其它 8.新加入Dojo1.7中，最棒的地方在于能够自动侦测客户端并且显示正确的主题，当然你可以关闭这个功能 9.新加入Dojo1.7中一些组件，提示条，悬浮窗口，组合框，可扩展textarea，分页，滑动块等，完整信息请查看：/releasenotes/1.7#mobile 主要页面结构 和一般web应用类似，dojox/mobile也精心设计了相关结构。包括： 1.DOCTYPE 2.META标签 3.Body元素 代码结构如下： !DOCTYPE html 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 / dojox/mobile Demo !-- dojo javascript code and CSS code -- !--? mobile应用内容 -- 接下来我们添加dojo js，如下： script src /ajax/libs/dojo/1.7.1/dojo/dojo.js data-dojo-config async: true  script type text/javascript require [dojox/mobile/parser, dojox/mobile, dojox/mobile/deviceTheme, dojox/mobile/compat, dojo/domReady!], function parser parser.parse ;? ; 以上代码中，我们引用了dojo类库，并且使用AMD方法，加载了dojox/mobile和相关其它类库。 其中dojox/mobile/parser和dojox/mobile是必须包含的。 其次加载了dojox/mobile/deviceTheme，用来生成不同主题。最后我们加载dojox/mobile/compact，使用它来保证如果不支持css3动画，将使用javascript来替代，这个不是必须要的，但是为了不同设备的兼容性，我们还是需要添加。 视图和组件处理如下： 1.View是类似页面的定义 2.Scrolling view是可滚动的页面 3.Button：按钮 4.Listitem：列表内容 5.Switch：开关组件 6.更多请查看文档 下面代码我们创建了一个简单view： div id home data-dojo-type dojox.mobile.View data-dojo-props selected: true h1 data-dojo-type dojox.mobile.Heading Dojo/Mobile GB 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 data-dojo-type dojox.mobile.ListItem data-dojo-props icon:img/icon.jpg, rightText:查看, moveTo: tutorial 专题教程 li data-dojo-type dojox