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

阅读更多

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

使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用_第1张图片

在线演示   本地下载

随着科技的进步,越来越多的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
  • META标签
  • Body元素 

代码结构如下:

 
     
             
                 
                 
        dojox/mobile Demo                 
              
         
                     
             
     
 

接下来我们添加dojo js,如下:


以上代码中,我们引用了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

  • 最新文章
  • 专题教程
  • 技术开发
  • 设计素材
  • 阅读配置

......

......

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

你可能感兴趣的:(dojo,dojox/mobile,dojomobile,移动框架)