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

2012-08-20 17:40 稿源:gbin1.com  0条评论

在线演示   本地下载

随着科技的进步,越来越多的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,分页,滑动块等,完整信息请查看:http://livedocs.dojotoolkit.org/releasenotes/1.7#mobile

主要页面结构

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

1.DOCTYPE

2.META标签

3.Body元素

代码结构如下:

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

视图和组件处理如下:

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 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>

这里定义了dojo-type,dojo-props,大家可以看到和jQuery mobile类似,使用data属性定义不同内容。

相关文章

相关热点

查看更多