论坛 › Web开发 › 移动web开发学习一：jquery mobile 和 scrollview的整合 2..............

三里屯摇滚 发表于 2012-01-10 11:50

移动web开发学习一：jquery mobile 和 scrollview的整合 2..............

移动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   
      var memo = ' 人气: ' + item.allVisiteCount + '    城市： ' + item.nowCity + '    星座:  ' + item.constellation   
      var li = '<lidata-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')   
    $('#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                     
                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
                var        memo = '&nbsp;人气:&nbsp;' + item.allVisiteCount + '&nbsp;&nbsp;&nbsp;&nbsp;城市：&nbsp;' + item.nowCity + '&nbsp;&nbsp;&nbsp;&nbsp;星座:&nbsp; ' + item.constellation
                var        li = '<lidata-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')
        $('#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                                       
                                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')   
    $('#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                     
                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')
        $('#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                                       
                                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

在我心中舞动 发表于 2012-01-10 11:50

谢谢分享

查看完整版本: 移动web开发学习一：jquery mobile 和 scrollview的整合 2..............