- 论坛徽章:
- 0
|
移动web开发学习一:jquery mobile 和 scrollview的整合 2..............
这里不是业务代码,基本上就是定义了一些函数。
8757.app.js
Javascript代码- // 本地化命名空间
- 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 = ' 人气: ' + item.allVisiteCount + ' 城市: ' + item.nowCity + ' 星座: ' + 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 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 = ' 人气: ' + item.allVisiteCount + ' 城市: ' + item.nowCity + ' 星座: ' + 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定义暂且忽略,最后一行
Javascript代码- convage_mobile.run(pages)
- convage_mobile.run(pages)
复制代码 是调用了core.js的run方法,然后回到这个文件研究一下这个方法,发现就是从pages里面一个个去注册事件,因为只是个DEMO,就写了index这个页面的渲染过程,发现他的event是pagecreate,就是当页面进入之时,要执行的方法,更多说明见:
http://www.jqmapi.com/api/events.html
注册的是这个事件
Javascript代码- 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);
- });
- }
- }
- 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带了一个参数,我们来看一下代码
Javascript代码- 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')
- }
- );
-
-
- }
- 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,需要添加的是"更多..."
Javascript代码- if(clear_flag){
- $listview.html(li_array.join(''))
- }else{
- $listview.append(li_array.join(''))
- }
- 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
|
|