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

前端之家收集整理的这篇文章主要介绍了使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

在线演示 本地下载

随着科技的进步,越来越多的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 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',moveTo: 'tutorial'">
					专题教程
				</li>
				<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg',moveTo: 'technology'">
					技术开发
				</li>
				<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg',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属性定义不同内容

完整代码如下:

<!DOCTYPE html>
<html>
	<head>
		<Meta name="viewport" content="width=device-width,user-scalable=no"/>
		<Meta name="apple-mobile-web-app-capable" content="yes" />
		<Meta name="article" id="articlelink" content="/technology/jquerymobile/20120814-dojo-mobile/" />
		<title>dojox/mobile Demo</title>
		<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",function(parser) {
				parser.parse();
			});
			
		</script>
	</head>
	<body>
		
		<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',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>

		<div id="tutorial" data-dojo-type="dojox.mobile.View">
			<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页',moveTo:'home'">专题教程</h1>
			<ul data-dojo-type="dojox.mobile.RoundRectList">
				<li data-dojo-type="dojox.mobile.ListItem">
					<a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-introduction">GBin1专题之HTML5教程 - 第一篇:HTML5介绍</a>
				</li>
				<li data-dojo-type="dojox.mobile.ListItem">
					<a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-new-elements">GBin1专题之HTML5教程 - 第二篇:HTML5元素</a>
				</li>
				<li data-dojo-type="dojox.mobile.ListItem">
					<a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video">GBin1专题之HTML5教程 - 第三篇:HTML5 Video元素</a>
				</li>				
			</ul>
		</div>
		
		
		<div id="technology" data-dojo-type="dojox.mobile.View">
			<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页',moveTo:'home'">技术开发</h1>
			<ul data-dojo-type="dojox.mobile.RoundRectList">
				<li data-dojo-type="dojox.mobile.ListItem" >
					<a href="http://www.gbin1.com/technology/html/20120521html5-tutorials-new-feature">强烈推荐:GBin1专题教程之HTML5新特性系列</a>
				</li>
				<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText: '2h 40m'">
					<a href="http://www.gbin1.com/technology/html/20120417html5draganddrop">分享一个HTML5的drag and drop API实现的图片拖拽分组效果</a>
				</li>
			</ul>
		</div>
		
		<div id="icon" data-dojo-type="dojox.mobile.View">
			<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页',moveTo:'home'">设计素材</h1>
			<ul data-dojo-type="dojox.mobile.RoundRectList">
				<li data-dojo-type="dojox.mobile.ListItem" >
					<a href="http://www.gbin1.com/tools/icon/20120706freebieuikit">免费资源下载:两套超棒的UI界面设计素材集</a>
				</li>
				<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText: '2h 40m'">
					<a href="http://www.gbin1.com/tools/icon/20120705-dark-searchBox">免费资源下载:暗色色系的超棒搜索框和下拉菜单UI欣赏</a>
				</li>
			</ul>
		</div>
		
		
		<div id="article" data-dojo-type="dojox.mobile.View">
			<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页',moveTo:'home'">文章内容</h1>
			<ul data-dojo-type="dojox.mobile.RoundRectList">
				<li data-dojo-type="dojox.mobile.ListItem" >
					 请参考在线演示查看效果,希望大家喜欢这个简单的效果!
				</li>
			</ul>
		</div>
		
	</body>
</html>
 

传智播客收集整理,关注java培训,提供java入门教程java程序设计教程java视频教程下载

猜你在找的Dojo相关文章