`

使用最新版本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应用

分享到:
评论

相关推荐

    dojo 1.7 最新dojo包,内含最新的实例若干个。

    9. **dojo/i18n**: 国际化支持是Dojo的一个重要特性,`dojo/i18n`模块帮助开发者轻松地为应用添加多语言支持。 10. **dojo/request**: Dojo 1.7 包含了`dojo/request`模块,用于处理HTTP请求,如GET、POST、PUT、...

    Dojo 1.7 中文版本注释功能说明

    总的来说,Dojo 1.7的AMD支持和模块拆分带来了更高效、灵活的开发体验,同时也需要注意与旧版本的兼容性和特定模块的使用方式。开发者应确保了解并适当地调整代码以利用这些新特性。对于遇到的兼容性问题,可以关注...

    Dojo1.7 Api chm

    《Dojo 1.7 API CHM:深入理解与应用》 Dojo 是一个功能强大的JavaScript工具库,尤其在Web开发领域,它提供了一系列高级功能,包括模块化、数据管理、用户界面构建以及Ajax交互等。Dojo 1.7 API CHM文件是针对这个...

    dojo 源码1.7汇总

    Dojo 是一个强大的JavaScript 库,它为Web 开发提供了丰富的功能和工具,尤其是在构建复杂的、可维护的、高性能的富互联网应用(RIA)时。Dojo 1.7 版本是其历史上的一个重要里程碑,引入了许多改进和优化,包括模块...

    dojo toturial with design best practise

    《dojo toturial with design best practise》是一本深入探讨Dojo框架并结合设计模式实践的书籍。这本书旨在帮助开发者不仅掌握Dojo库的基本...通过学习和实践书中的例子,你将能够更好地应对复杂的Web应用开发挑战。

    使用_Dojo_Mobile_为_iOS_智能终端开发_Native-like_Web_应用

    Dojo Mobile适合于创建轻量级且高性能的移动Web应用,它封装了许多常用的UI控件,这些控件针对移动设备进行了优化,能够提供良好的触摸体验,并且具有较高的响应速度。 开发者在使用Dojo Mobile进行开发时,会遇到...

    dojo-release-1.10.4

    10. **移动开发**:虽然Dojo 1.10.4主要是为桌面环境设计的,但`dojox/mobile`提供了一些适用于移动设备的功能,如滚动列表、下拉菜单等,以适应移动Web开发的需求。 总的来说,"dojo-release-1.10.4"是一个全面的...

    Dojo包下载 包含dijit dojo dojox util四个文件目录

    解压后,你可以通过Dojo的加载器(dojo/require, dojo/ready等)来引入和使用这些模块,从而构建功能完善的Web应用程序。在使用前,确保阅读官方文档以了解如何正确配置和使用Dojo框架,以便充分利用其强大功能。

    dojo开发帮助文档

    数据管理在Dojo 中由dojo/store 和dojox/data 提供支持。它们定义了数据存储和检索的接口,可以与各种数据源(如JSON、XML或数据库)交互。`dojo/store/Memory`是一个简单的内存中数据存储,而`dojo/data/...

    多文件上传 dojo组件 dojox.form.FileUploader

    标题中的“多文件上传 dojo组件 dojox.form.FileUploader”是指使用Dojo JavaScript库中的dojox.form.FileUploader组件来实现网页上的多文件上传功能。Dojo是一个强大的JavaScript框架,它提供了丰富的UI组件和工具...

    dojo开发文档

    5. **dojo/store和dojo/data**:这两者是Dojo的数据存储抽象层,`dojo/store`适用于现代Web应用,而`dojo/data`则用于较早的Dojo版本。它们提供了数据获取、查询和更新的接口,可以和各种数据源(如JSON、XML)配合...

    AJAX之Dojo实现登陆框

    6. 登录状态保持:如果登录成功,可能需要在客户端存储用户信息,例如使用dojo/store/Memory或dojox/data/ItemFileWriteStore来存储用户会话数据,并用dojo/cookie或dojo/storage来持久化登录状态。 7. 安全性考虑...

    dojo的ppt课件和开发手册

    `dojo/i18n`模块支持应用程序的国际化和本地化,允许开发者轻松地根据用户的语言和地区调整文本、日期格式等。 8. **工具链与构建** `dojo`的构建工具可以优化和压缩源代码,减少HTTP请求,提高应用性能。此外,...

    超多的Dojo实例应用演示源码

    这些示例将展示如何利用DojoX进行更复杂的应用开发。 5. **Dojo XHR与Ajax**:Dojo提供了xhr函数,如`dojo/xhrGet`和`dojo/xhrPost`,用于处理AJAX请求。通过实例,你可以了解如何使用这些函数与其他服务器进行数据...

    dojo例子之布局管理

    Dojo还支持响应式设计,通过使用dojox/mobile/View或dojox/mobile/SwapView等移动布局组件,可以确保你的应用在手机和平板设备上同样具有良好的表现。Dojo的`dojox/layout/ResponsiveGridLayout`组件则可以根据屏幕...

    DOJO源代码

    `dojox/testing` 提供了单元测试框架,而 `dojo/_base/xstyle` 和 `dojo/_base/sniff` 可以帮助开发者编写适应不同浏览器和设备的代码。 通过深入学习和分析这个压缩包中的源代码和示例,你不仅可以掌握 Dojo 的...

    dojo/js/css 压缩打包工具 - 桌面版

    使用方便,无需安装配置, 下载置入dojo源码下的任意目录即可一键完成打包压缩. 该工具可自动分析HTML文件生成打包方案,自动排除没有用到的js文件,可将dojo压缩到数百K大小. 自带支持高亮、代码提示的profile编辑器,...

    bugfix.txt

    在使用 Dojo 开发的应用中,经常会遇到与数据网格(grid)相关的功能需求。其中 `dojox/grid` 是 Dojo 提供的一组用于实现高级数据网格的功能库。 本文将针对一个具体的 bug 进行分析,并给出修复方案。该 bug 主要...

    图书:Dojo入门

    `dojo/request`是Dojo 1.7引入的新API,它对xhr进行了封装,提供了更简洁的接口。 在实际开发中,Dojo的工具集如Build System也十分有用。它允许开发者对项目进行优化,包括合并、压缩和混淆JavaScript及CSS文件,...

Global site tag (gtag.js) - Google Analytics