移动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" ><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" 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" 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">
<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><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" 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>
<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>
<div data-role="footer" id="footer" data-position="fixed"> <div data-role="navbar" data-theme="a" > <ul> <li><a href="#" data-icon="home" 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>
<script type="text/javascript" src="js/8757.core.js"></script><script type="text/javascript" src="js/8757.app.js"></script>
// 全局命名空间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.ide_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])}}}// 本地化命名空间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]varmemo = ' 人气: ' + item.allVisiteCount + ' 城市： ' + item.nowCity + ' 星座: ' + item.constellation varli = '<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)convage_mobile.run(pages)
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);});}}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')} );}if(clear_flag){$listview.html(li_array.join(''))}else{$listview.append(li_array.join(''))}