日期：2012-8-14 来源：GBin1.com

使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用

随着科技的进步，越来越多的javascript类库开发出了面对移动设备的类库，例如，jQuery Mobile，Secha touch等，随着Dojo最新版本1.7的发布，同样的也带来了Dojo版本的移动开发框架Dojox/mobile。这套框架使用基于controller和CSS3主题的架构，帮助你快速的开发智能，灵活并且跨平台的移动设备web应用。在今天我们这篇文章，将介绍如何使用Dojox/mobile来开发一个简单的移动网站应用。记得前段时间我们发布的使用jQuery创建iphone风格的导航吧，这里我们使用dojox/mobile也实现一个类似的效果。

关于dojox/mobile

主要页面结构

和一般web应用类似，dojox/mobile也精心设计了相关结构。包括：

DOCTYPE
META标签
Body元素

代码结构如下：

 
     
             
                 
                 
        dojox/mobile Demo                 
        <!-- dojo javascript. code and CSS code -->      
         
                     
        <!--  mobile应用内容 -->

接下来我们添加dojo js，如下：



    
    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来替代，这个不是必须要的，但是为了不同设备的兼容性，我们还是需要添加。

视图和组件处理如下：

View是类似页面的定义
Scrolling view是可滚动的页面
Button：按钮
Listitem：列表内容
Switch：开关组件
更多请查看文档

下面代码我们创建了一个简单view：

        
            Dojo/Mobile GBin1.com
                
                
                    最新文章
                            
                
                    专题教程
                
                
                    技术开发
                
                
                    设计素材
                
                
                    阅读配置

......

ITPub博客

使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用

关于dojox/mobile

主要页面结构

Dojo/Mobile GBin1.com

最新文章