`
xianglg
  • 浏览: 66722 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

移动web开发学习一:jquery mobile 和 scrollview的整合

阅读更多
最近有一项目,需要分别开发安卓和IOS版本,原计划是招两个开发组,并行开发,但成本太高,而且时间上也来不及,就想试用用PHONEGAP打包WEB应用。

现在用的比较多的是jquery mobile和sencha,一个是jquery,一个是 ext,从难易度来说,jquery很容易上手,ext基本上全是JS,代码量很大。

本章主要讲解jquery mobile的应用,一个小DEMO,网站

界面如下:

http://www.8757.com/mobile/



代码上,其实就三个文件,一个html文件,两个JS文件,数据从云服务器上获取JSON,然后进行解析。

先来看一下index.html的代码
<!DOCTYPE html>
<html manifest="cache.manifest">
	<head>
	<meta charset="utf-8">
	<title>佰奇网</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" type="image/x-icon" href="http://www.8757.com/assets/images/favicon.png" />
	<link type="image/x-icon" rel="shortcut icon" href="http://www.8757.com/assets/images/favicon.png" />
	<link rel="stylesheet" href="assets/jquery.mobile-1.0.min.css" />
    <link rel="stylesheet" href="assets/jquery.mobile.scrollview.css" />
    <link rel="stylesheet" href="assets/css.css" />
	<script src="assets/jquery-1.6.4.min.js"></script>
	<script src="assets/jquery.mobile-1.0.min.js"></script>
	<script src="assets/jquery.mobile.scrollview.js"></script>
    <script src="assets/jquery.easing.1.3.js"></script>
    <script src="assets/scrollview.js"></script>
	<script type="text/javascript">	
		$(document).bind("mobileinit", function(){			
			$.mobile.defaultPageTransition = 'none'
			$.mobile.loadingMessage = '加载中...'
			$.mobile.page.prototype.options.backBtnText = '后退'
			$.mobile.page.prototype.options.addBackBtn= true
		});
	</script>
    <script src="/phonegap.js" type="text/javascript"></script>
	</head>
	<body>
	<div data-role="page" id="index" class="type-interior" >
		<div data-role="header" data-theme="b" data-nobackbtn="true" data-position="fixed"> 
        	<a href="login.html" data-rel="dialog">登录</a>
    		<h1>佰奇网</h1>
			<a href="reg.html" data-rel="dialog">注册</a> 
            
		</div>
    
        <div data-role="content" data-inset="true" class="ui-scrolllistview" id="scroller" style="padding:0px; ">            
            <select name="type" id="select_type" data-native-menu="false">
                <option value="1" selected>推荐宝贝</option>
                <option value="2">人气宝贝</option>
                <option value="3">最新加入</option>
            </select>           

            <ul data-role="listview" style="margin:0px;">               
            </ul>       
            <div style="text-align:center" id="div_loading">
            	<img src="assets/images/ajax-loader.png"/>
            </div>      
            <div id="getMore">更多...</div>
            <!--<a href='#' id='listmore' data-role='button'>更多...</a>               	-->
        </div>
    
        <div data-role="footer" id="footer" data-position="fixed">
            <div data-role="navbar" data-theme="a" >
                <ul>
                    <li><a href="#" data-icon="home"  class="ui-btn-active" data-iconpos="top" data-theme="b">宝贝导航</a></li>
                    <li><a href="siteNav.html" data-icon="search" data-iconpos="top" data-theme="b">站点导航</a></li>
                    <li><a href="#"  data-icon="grid" data-iconpos="top" data-theme="b">音频导航</a></li>
                    <li><a href="#"  data-icon="star" data-iconpos="top" data-theme="b">宝贝收藏</a></li>
                    <li><a href="#"  data-icon="info" data-iconpos="top" data-theme="b">我的资料</a></li>
                </ul>
            </div>
        </div>
	</div>

    <script type="text/javascript" src="js/8757.core.js"></script>
	<script type="text/javascript" src="js/8757.app.js"></script>
</body>
</html>



稍为讲解一下:
<!DOCTYPE html>
<html manifest="cache.manifest">

其中cache.manifest表明页面将缓存,缓存配置在cache.manifest文件里,有兴趣的同学可下载附近自行研究。
接下来就是JS文件和样式文件的引用了,估计都能看的懂
<script type="text/javascript">	
		$(document).bind("mobileinit", function(){			
			$.mobile.defaultPageTransition = 'none'
			$.mobile.loadingMessage = '加载中...'
			$.mobile.page.prototype.options.backBtnText = '后退'
			$.mobile.page.prototype.options.addBackBtn= true
		});
	</script>


这是jquery mobile的配置,关于这方面的资料,大家看这里,会更清楚了
http://www.jqmapi.com/

接着就是jqm的page,page里分别是head,content,foot,先来看head
		<div data-role="header" data-theme="b" data-nobackbtn="true" data-position="fixed"> 
        	<a href="login.html" data-rel="dialog">登录</a>
    		<h1>佰奇网</h1>
			<a href="reg.html" data-rel="dialog">注册</a> 
            
		</div>


一个标题,加两个按钮,这个按钮链接的方式是窗口弹出式。
接着content
        <div data-role="content" data-inset="true" class="ui-scrolllistview" id="scroller" style="padding:0px; ">            
            <select name="type" id="select_type" data-native-menu="false">
                <option value="1" selected>推荐宝贝</option>
                <option value="2">人气宝贝</option>
                <option value="3">最新加入</option>
            </select>           

            <ul data-role="listview" style="margin:0px;">               
            </ul>       
            <div style="text-align:center" id="div_loading">
            	<img src="assets/images/ajax-loader.png"/>
            </div>      
            <div id="getMore">更多...</div>
        </div>

content里有三个部分,一个是select,后面讲js时会讲到他的作用,接着是listview,这里用scrollview,有很多同学问怎么使用scrollview,其实很简单,在头文件里引用这些文件即可
    <link rel="stylesheet" href="assets/jquery.mobile.scrollview.css" />
    <script src="assets/jquery.mobile.scrollview.js"></script>
    <script src="assets/jquery.easing.1.3.js"></script>
    <script src="assets/scrollview.js"></script>

这样,就可以固定底部,然后用手拖放可以滚动中间的listview,类似于微博效果了。
接下来是foot
        <div data-role="footer" id="footer" data-position="fixed">
            <div data-role="navbar" data-theme="a" >
                <ul>
                    <li><a href="#" data-icon="home"  class="ui-btn-active" data-iconpos="top" data-theme="b">宝贝导航</a></li>
                    <li><a href="siteNav.html" data-icon="search" data-iconpos="top" data-theme="b">站点导航</a></li>
                    <li><a href="#"  data-icon="grid" data-iconpos="top" data-theme="b">音频导航</a></li>
                    <li><a href="#"  data-icon="star" data-iconpos="top" data-theme="b">宝贝收藏</a></li>
                    <li><a href="#"  data-icon="info" data-iconpos="top" data-theme="b">我的资料</a></li>
                </ul>
            </div>
        </div>

底部代码也很明白,navbar表明这是个菜单,需要说明的是,navbar一行最多只能显示5个,5个后,jqm 会自动进行换行。
最后来看一下,数据渲染这块,也就是两个js文件
         <script type="text/javascript" src="js/8757.core.js"></script>
	<script type="text/javascript" src="js/8757.app.js"></script>

其中8757.core.js代码如下
// 全局命名空间
var convage_mobile = {
	author : 'Convage Inc.',
	version: '1.0',
	website: 'http://www.8757.com'
}
// 工具包
convage_mobile.utils = {
	setParam : function (name,value){
		localStorage.setItem(name,value)
	},
	getParam : function(name){
		return localStorage.getItem(name)
	},
	uuUrlGen: function (url){
		var uuUrl;
		var xcharset = document.all?"GBK":"UTF-8";
		if (url.indexOf("?") >= 0){
			uuUrl = url + "&xcharset=" + xcharset + "&ran=" + Math.random();
		}else{
			uuUrl = url + "?xcharset=" + xcharset + "&ran=" + Math.random();
		}
		return uuUrl;
	} 
}
// 业务控制中心,需应用实现
convage_mobile.controllers = {}
// 事件注册
convage_mobile.run = function(pages){
	var pages = pages,
	count = pages.length;
	for(var i=0;i<count;i++){
		var page = pages[i],
			id = page.id
			e_array = page.event.split(',')
		for(var j=0; j <e_array.length;j++){
			var e = e_array[j]
			if($.trim(e).length == 0)
				continue
			$('#'+id).live(e, convage_mobile.controllers[id][e])
		}
	}
}

这里不是业务代码,基本上就是定义了一些函数。
8757.app.js
// 本地化命名空间
var utils = convage_mobile.utils,
	controllers = convage_mobile.controllers,
	website = convage_mobile.website,
	cpage = 1
// 模板

function tplMmInfo(array, items){
	for(var i in items){
		var item = items[i]
		var	memo = '&nbsp;人气:&nbsp;' + item.allVisiteCount + '&nbsp;&nbsp;&nbsp;&nbsp;城市:&nbsp;' + item.nowCity + '&nbsp;&nbsp;&nbsp;&nbsp;星座:&nbsp; ' + item.constellation 
		var	li = '<li  data-icon="false"><a href="#discussion" data-id="'+ item.userId +'"><img src="'+ website + item.headPic +'"/><h3>' + item.nick + '</h3><p>'+ memo +'</p></a></li>'
		array.push(li)
	}
}

var refreshList = function(clear_flag){
	var $listview = $('#index').find('ul[data-role="listview"]')
	$('#div_loading').css('display', 'block')
	if(clear_flag){
		$listview.html('')	
	}
	$.getJSON(
			utils.uuUrlGen(website + '/mclient/m!mmList.jhtml?callback=?'),
			{
				cpage: cpage,
				type: $('#select_type').val()
			},
			function(data) {
				var json = data[0]					
				var li_array = []
				tplMmInfo(li_array, json.result)				
				if(clear_flag){
					$listview.html(li_array.join(''))	
				}else{
					$listview.append(li_array.join(''))				
				}
				$listview.listview('refresh')	
				
				cpage ++
				
				$('#div_loading').css('display', 'none')
			}
	  );
				
	
}

controllers.index = {
	pagecreate : function(event){
		refreshList();
		$("#getMore").bind( "click", function(event, ui) {
			refreshList(false);
		}); 
		$("#select_type").bind( "change", function(event, ui) {
			cpage = 1;
			refreshList(true);
		});
	}
}

var pages = [
	{id: 'index', event:'pagecreate'}
]
convage_mobile.run(pages)

看代码,一般都是倒退,前面的var定义暂且忽略,最后一行
convage_mobile.run(pages)

是调用了core.js的run方法,然后回到这个文件研究一下这个方法,发现就是从pages里面一个个去注册事件,因为只是个DEMO,就写了index这个页面的渲染过程,发现他的event是pagecreate,就是当页面进入之时,要执行的方法,更多说明见:
http://www.jqmapi.com/api/events.html
注册的是这个事件
controllers.index = {
	pagecreate : function(event){
		refreshList(true);
		$("#getMore").bind( "click", function(event, ui) {
			refreshList(false);
		}); 
		$("#select_type").bind( "change", function(event, ui) {
			cpage = 1;
			refreshList(true);
		});
	}
}

第一步是刷新列表refreshList();然后又定义了两个事件监听,第一个是点“更多”时再刷新一次,第二个是选择select时刷新列表,分别对应content 里的三个部分。refreshList带了一个参数,我们来看一下代码
var refreshList = function(clear_flag){
	var $listview = $('#index').find('ul[data-role="listview"]')
	$('#div_loading').css('display', 'block')
	if(clear_flag){
		$listview.html('')	
	}
	$.getJSON(
			utils.uuUrlGen(website + '/mclient/m!mmList.jhtml?callback=?'),
			{
				cpage: cpage,
				type: $('#select_type').val()
			},
			function(data) {
				var json = data[0]					
				var li_array = []
				tplMmInfo(li_array, json.result)				
				if(clear_flag){
					$listview.html(li_array.join(''))	
				}else{
					$listview.append(li_array.join(''))				
				}
				$listview.listview('refresh')	
				
				cpage ++
				
				$('#div_loading').css('display', 'none')
			}
	  );
				
	
}

参数clear_flag发现是有两个用途,如果为true,listview清空,然后在getJson后,判断,如果为tue,则直接html,意思是替换listview代码,如果是false,则插入从云服务器上获取的数据,在业务上即分别对应了两个按钮,需要清空的是选择select,需要添加的是"更多..."
if(clear_flag){
					$listview.html(li_array.join(''))	
				}else{
					$listview.append(li_array.join(''))				
				}


剩下的JS代码就是解析 JSON了,多说无益了。我上传了附件,附件里包含了源代码,及已经打包好的APK,大家可自行研究。
另外要研究打包的,可看下面文章
http://www.html5mobi.com/discussion/167/phonegap-web-android

最后评价一下jqm吧,入门容易,但如果要开发的是app应用,真不行,速度是真慢,所以准备放弃jqm,转去研究sencha,过两天写一篇吧
  • 大小: 38.9 KB
分享到:
评论
7 楼 wangjhcy 2013-07-07  
刚接触 jquery mobile 这个例子没运动起来。谁有可以运动的例子代码发给我一份。谢谢老师。邮箱 : 1976395501@qq.com
6 楼 cdwen 2013-05-21  
发现cpage没有改变的原因了,我自己把更多...给屏蔽了。。。
5 楼 cdwen 2013-05-21  
作为移动web应用新人,拿lz这个代码,写了个提供服务的servlet,改了下显示的部分,跑了一下,但是发现个问题是,似乎这个refreshList函数只有在select初建和list被重新选择的时候调用,似乎不能做到像一些门户网站的手机访问时那种向下拉时就翻下一页的效果,请教一下那个是怎么实现的?还有似乎访问一次之后,cpage没有改变,一直在1,没能变大。
4 楼 mihc9275 2013-03-10  
碰到个问题,请教一下,我刚才用了jquery.mobile.scrollview来滚动页面,水平滚动的时候手指一放开就自动弹回了原位,竖直滚动就没问题,知道怎么回事吗?
3 楼 demon19850227 2013-01-05  
陈文景 写道
楼主你好想请教一下  你在做这个demo的时候会不会遇到上下滚动屏幕时 header和footer会消失的问题呢。。。


他没有消失,是你固定了header和footer,当你单击的时候会触发header和footer缩回去,再点一下header和footer会出现,做拖动的第一个下动作就是单击屏幕,header和footer就缩回去了,不缩回去也是可以设置的
2 楼 陈文景 2012-02-28  
楼主你好想请教一下  你在做这个demo的时候会不会遇到上下滚动屏幕时 header和footer会消失的问题呢。。。
1 楼 woshifeixiaochuan 2012-01-10  
很好了,很适合我,谢谢了

相关推荐

Global site tag (gtag.js) - Google Analytics