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

日期：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

相关特性：

  • 轻量级，依赖性非常小
  • 提供了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元素 

代码结构如下：

<!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应用

posted @ 2012-08-14 14:43  igeekbar  阅读(478)  评论(0)    收藏  举报

中文互联： GBin1.com | RSS订阅 | 邮件订阅 | 手机订阅