jqMobi中的页面布局不多，目前主要有Styled Lists，和Grid System两种布局。

    Styled Lists是列表时布局，每一行只显示一条数据。

     基本结构式使用ul并设置类属性为list，每一行一个标签<li>

例如：

[html] view plaincopy

1. <ul class="list">  
2.         <li>  需要显示的内容</li>  
3.         <li> 需要显示的内容</li>  
4.         <li>需要显示的内容</li>  
5.        </ul>   

再例如：

[html] view plaincopy

1. <ul class="list">  
2.         <li>  <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 1</a></li>  
3.         <li>  <a href="detailitem.html" data-refresh-ajax="true" class='icon picture big'>账户new 2</a></li>  
4.         <li>  <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 3</a></li>  
5.        </ul>    

可以使用inset增加一定的效果

例如：

[html] view plaincopy

1. <ul class="list inset">  
2.     <li>  <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 1</a></li>  
3.     <li>  <a href="detailitem.html" data-refresh-ajax="true" class='icon picture big'>账户new 2</a></li>  
4.     <li>  <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 3</a></li>  
5.    </ul>   

可以看到边角变成了圆形。

官网参考

     在app开发中会经常使用到开关按钮。显示效果如下：

在jqMobi中实现也很简单。

    实现上边的效果代码：

[html] view plaincopy

1. <div>  
2.                    <label>  
3.                        记住密码</label><input id="forgetPwd" type="checkbox" name="forgetPwd" value="1" class="toggle"><label  
4.                            for="forgetPwd" data-on="On" data-off="Off"><span></span></label><br />  
5.                    <label>  
6.                        自动登录</label><input id="outologin" type="checkbox" name="outologin" value="0" class="toggle"><label  
7.                            for="outologin" data-on="On" data-off="Off"><span></span></label>  
8.                </div>  

  关键是给radio或者checkbox.使用类属性toggle，并添加一个label标签，使label标签的for属性对应与radio或者checkbox的name，使用data-on来设置选中时显示的文字，使用data-off来设置没有选择的文字。在label中间必须添加一个span标签。

判断是否选中的方法：

例如上边的代码；判断是否记住密码

应该使用prop方法，而不是使用attr，或者val

测试代码：

[javascript] view plaincopy

1. alert($("#forgetPwd").attr("checked"));  
2.           alert($("#forgetPwd").prop("checked"));  
3.           alert($("#forgetPwd").val());  

选中时$("#forgetPwd").prop("checked")为true，否则为false。

官网参考

     在app开发中会经常使用到开关按钮。显示效果如下：

在jqMobi中实现也很简单。

    实现上边的效果代码：

[html] view plaincopy

1. <div>  
2.                    <label>  
3.                        记住密码</label><input id="forgetPwd" type="checkbox" name="forgetPwd" value="1" class="toggle"><label  
4.                            for="forgetPwd" data-on="On" data-off="Off"><span></span></label><br />  
5.                    <label>  
6.                        自动登录</label><input id="outologin" type="checkbox" name="outologin" value="0" class="toggle"><label  
7.                            for="outologin" data-on="On" data-off="Off"><span></span></label>  
8.                </div>  

  关键是给radio或者checkbox.使用类属性toggle，并添加一个label标签，使label标签的for属性对应与radio或者checkbox的name，使用data-on来设置选中时显示的文字，使用data-off来设置没有选择的文字。在label中间必须添加一个span标签。

判断是否选中的方法：

例如上边的代码；判断是否记住密码

应该使用prop方法，而不是使用attr，或者val

测试代码：

[javascript] view plaincopy

1. alert($("#forgetPwd").attr("checked"));  
2.           alert($("#forgetPwd").prop("checked"));  
3.           alert($("#forgetPwd").val());  

选中时$("#forgetPwd").prop("checked")为true，否则为false。

官网参考

    jqMobi中的 Grid布局，是一种表格式布局，主要是两列，三列布局。

[html] view plaincopy

1.   <div class="grid">  
2.     <div class="col2">  <a href="#home" id='navbar_home' class='icon home' >两列第一列测试</a> </div>  
3.     <div class="col2">  <a href="#home" id='A1' class='icon picture' >两列第二列测试</a> </div>   
4. </div>  
5. <br /><br />  
6. <div class="grid">  
7.     <div class="col3">  <a href="#home" id='A2' class='icon home' >三列测试</a> </div>  
8.     <div class="col3">  <a href="#home" id='A3' class='icon picture' >三列测试</a> </div>  
9.     <div class="col3">  <a href="#home" id='A4' class='icon home' >三列测试</a> </div>  
10.      <div class="col3">  <a href="#home" id='A11' class='icon picture' >三列测试</a> </div>  
11. </div>  
12. <br /><br />  
13. <div class="grid">  
14.     <div class="col1-3">  <a href="#home" id='A5' class='icon home' >三列测试</a> </div>  
15.    <div class="col1-3">  <a href="#home" id='A15' class='icon home' >三列测试</a> </div>  
16.      <div class="col1-3">  <a href="#home" id='A16' class='icon home' >三列测试</a> </div>  
17.      <div class="col2-3">  <a href="#home" id='A6' class='icon home' >三列测试占居两列</a> </div>         
18.     <div class="col1-3">  <a href="#home" id='A19' class='icon home' >三列测试</a> </div>      
19. </div>  

显示效果：

  在使用jqMobi开发app基础：Grid布局 中介绍了Grid布局，col2在大的屏幕上会显示为两列，col3会显示为3列，但如果屏幕小就会显示为一列，这就是响应式布局，也就是根据屏幕大小，动态改变css样式的一种布局。这种布局的关键字是@media

  在af.ui.css文件中搜索media找到如下css样式：

[css] view plaincopy

1. #afui .col2,  
2. #afui .col3,  
3. #afui .col1-3,  
4. #afui .col2-3 {  
5.   float: none;  
6.   width: 100%;  
7. }  
8. #afui .grid:after {  
9.   content: '';  
10.   clear: both;  
11. }  
12. @media handheld, only screen and (min-width: 768px) {  
13.   #afui .col2 {  
14.     width: 50%;  
15.     float: left;  
16.   }  
17.   #afui .col3 {  
18.     width: 33.3%;  
19.     float: left;  
20.   }  
21.   #afui .col1-3 {  
22.     width: 33.3%;  
23.     float: left;  
24.   }  
25.   #afui .col2-3 {  
26.     width: 66.6%;  
27.     float: left;  
28.   }  
29. }  

只有在屏幕宽度最小宽度大于768px时，才会变成多列。

这样就解释了，为什么相同的代码，会因为屏幕大小而显示不同的布局。也解释了官网的那句话。

On phones, the grid system will always default to a single row. On tablets, the grid will display inline.

响应式布局css需要注意的是css样式的空格一定不能少，否则就会导致没有效果

[css] view plaincopy

1. @media screen and (min-width: 320px) and (max-width : 479px)  

响应式布局参考文章

     在开发app时，会经常用到HTML5 LocalStorage 本地存储相关的资料。例如记住用户名，原来是使用cookie，现在基本都改成了LocalStorage 。

   使用LocalStorage 其实很简单，localStorage.setItem(key, value );设置值，localStorage.getItem(key)读取值。

    可以使用的代码：

[javascript] view plaincopy

1. LocalMobelInfo = function () {  
2. };  
3. LocalMobelInfo.prototype.putStringData = function (key, value) {  
4.     localStorage.setItem(key, value + "");  
5. };  
6. LocalMobelInfo.prototype.putBooleanData = function (key, value) {  
7.     localStorage.setItem(key, value + "");  
8. };  
9. LocalMobelInfo.prototype.putIntData = function (key, value) {  
10.     localStorage.setItem(key, value + "");  
11. };  
12. LocalMobelInfo.prototype.updateUser = function (name) {  
13.     localStorage.setItem("USERNAME", name + "");    
14. }  
15. LocalMobelInfo.prototype.getBooleanData = function (key) {  
16.     return "true" == localStorage.getItem(key) ? true : false;  
17. };  
18. LocalMobelInfo.prototype.getStringData = function (key) {  
19.     return localStorage.getItem(key);  
20. };  
21. LocalMobelInfo.prototype.getIntData = function (key) {  
22.     if (!isNullOrUndefined(localStorage.getItem(key))) {  
23.         return parseInt(localStorage.getItem(key));  
24.     } else {  
25.         return 0;  
26.     }  
27. };  
28. LocalMobelInfo.prototype.getUserName = function () {  
29.     return localStorage.getItem("USERNAME");  
30. }  

参考资料
 

      登录页面的实现，有两种方式。

   一种是直接在panel中填写代码：

  例如：

[html] view plaincopy

1.  <div id="login" class="panel" data-defer="login.html" modal="true" >   
2.     <input type="hidden"  id="islonin" value="false" />            
3.                 <div class="formGroupHead">  
4.                     用户名</div>  
5.                 <input type='text' id="txtusername" class='af-ui-forms' placeholder="Enter your user" style="background-color:Black">  
6.                 <div class="formGroupHead">  
7.                     密码</div>  
8.                 <input type='password' id="txtpassword" class='af-ui-forms' placeholder="Enter your pwd" style="background-color:Black"><br />  
9.                 <div>  
10.                     <label>  
11.                         记住密码</label><input id="recordPwd" type="checkbox" name="recordPwd"  class="toggle" checked="checked"><label  
12.                             for="recordPwd" data-on="是" data-off="否"><span></span></label><br />  
13.                     <label>  
14.                         自动登录</label><input id="autologin" type="checkbox" name="autologin" class="toggle"><label  
15.                             for="autologin" data-on="On" data-off="Off"><span></span></label>  
16.                 </div>  
17.                 <br />  
18.        <a class="button block" id="btnLogin">登录</a>    
19. </div>  

       另一种是一种是使用panel的data-defer属性，把相关的代码其他的页面

  例如：

panel的写法

[html] view plaincopy

1. <div id="login" title="办公平台" class="panel" data-defer="login.html" modal="true" >                  
2. </div>   

[html] view plaincopy

1. <!--<div title="办公平台"   > -->  
2.     <input type="hidden"  id="islonin" value="false" />            
3.                 <div class="formGroupHead">  
4.                     用户名</div>  
5.                 <input type='text' id="txtusername" class='af-ui-forms' placeholder="Enter your user" style="background-color:Black">  
6.                 <div class="formGroupHead">  
7.                     密码</div>  
8.                 <input type='password' id="txtpassword" class='af-ui-forms' placeholder="Enter your pwd" style="background-color:Black"><br />  
9.                 <div>  
10.                     <label>  
11.                         记住密码</label><input id="recordPwd" type="checkbox" name="recordPwd"  class="toggle" checked="checked"><label  
12.                             for="recordPwd" data-on="是" data-off="否"><span></span></label><br />  
13.                     <label>  
14.                         自动登录</label><input id="autologin" type="checkbox" name="autologin" class="toggle"><label  
15.                             for="autologin" data-on="是" data-off="否"><span></span></label>  
16.                 </div>  
17.                 <br />  
18.        <a class="button block" id="btnLogin">登录</a>       
19. <!--</div>-->  

jqMobi的限制。另外第二种写法里边的内容有一定限制，内容似乎不能再包含html,head等标签，测试得到的结果，没有找到相关文档。

  代码解释：

  1  id="login" 给panel命名，在以便于使用。

  2  modal="true"表示是弹出

  3  class="panel"表示此div是panel

  调用显示： $.ui.showModal("#login", "fade");

  完整的脚本：

[javascript] view plaincopy

1. LocalMobelInfo = function () {  
2. };  
3. LocalMobelInfo.prototype.putStringData = function (key, value) {  
4.     localStorage.setItem(key, value + "");  
5. };  
6. LocalMobelInfo.prototype.putBooleanData = function (key, value) {  
7.     localStorage.setItem(key, value + "");  
8. };  
9. LocalMobelInfo.prototype.putIntData = function (key, value) {  
10.     localStorage.setItem(key, value + "");  
11. };  
12. LocalMobelInfo.prototype.updateUser = function (name, password) {  
13.     localStorage.setItem("XPP_USERNAME", name + "");  
14.     localStorage.setItem("XPP_PASSWORD", password + "");  
15. }  
16. LocalMobelInfo.prototype.getBooleanData = function (key) {  
17.     return "true" == localStorage.getItem(key) ? true : false;  
18. };  
19. LocalMobelInfo.prototype.getStringData = function (key) {  
20.     return localStorage.getItem(key);  
21. };  
22. LocalMobelInfo.prototype.getIntData = function (key) {  
23.     if (!isNullOrUndefined(localStorage.getItem(key))) {  
24.         return parseInt(localStorage.getItem(key));  
25.     } else {  
26.         return 0;  
27.     }  
28. };  
29. LocalMobelInfo.prototype.getUserName = function () {  
30.     return localStorage.getItem("XPP_USERNAME");  
31. }  
32. LocalMobelInfo.prototype.getUserPassword = function () {  
33.     return localStorage.getItem("XPP_PASSWORD");  
34. }  
35. var dthMobileOA = null;  
36. var serviceUrl = "http://localhost:57843/Eas.WebsiteUpdate/";    
37. function init() {  
38.     dthMobileOA = new LocalMobelInfo();  
39.     var _username = dthMobileOA.getUserName();  
40.     var _password = dthMobileOA.getUserPassword();  
41.     $("#txtusername").val(_username);  
42.     $("#txtpassword").val(_password);  
43.     if (_password) {  
44.         $("#recordPwd").prop("checked", true);  
45.         // 自动登录    
46.         if (dthMobileOA.getBooleanData("autologin")) {  
47.             $("#autologin").prop("checked", true);  
48.             loginFun();  
49.         }   
50.     }  
51.   
52. }  
53. $.ui.ready(function () {  
54.     init();  
55.     $("#btnLogin").bind("click", loginFun);  
56.     $("#logoutSure").bind("click", logoutSureFun);  
57.     $("#logoutCancel").bind("click", logoutCancelFun);  
58.     $.ui.backButtonText = "返回";  
59.   
60. });  
61. function loginFun() {  
62.     var para = {  
63.         j_username: $("#txtusername").val(),  
64.         j_password: $("#txtpassword").val()  
65.     };  
66.     var url = serviceUrl + "UIPhoneAjax/MobLogin.ashx";  
67.     $.ui.showMask("登录中……");  
68.     $.post(url, para, function (res) {  
69.         if (res.IsSuccess) {  
70.             $.ui.hideMask();  
71.             $("#loginlink").hide();  
72.             $("#logoutlink").show();        
73.             $.ui.hideModal();  
74.             $("#islonin").val(true);  
75.             $("#home").show();  
76.             var isRecondPwd = $("#recordPwd").prop("checked");  
77.             if (isRecondPwd) {  
78.                 dthMobileOA.updateUser($("#txtusername").val(), $("#txtpassword").val());  
79.             } else {  
80.                 dthMobileOA.updateUser($("#txtusername").val(), null);  
81.             }  
82.             var isoutologin = $("#autologin").prop("checked");  
83.             dthMobileOA.putBooleanData("autologin", isoutologin);            
84.   
85.         } else {  
86.             $.ui.hideMask();  
87.             $("#afui").popup(res.Msg);  
88.         }  
89.     }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); })  
90. }  

 注销其实可以使用一个基本的a标签。

  例如我把登录和注销放在了底部导航条navbar中。

 基本代码：

[html] view plaincopy

1. <div id="navbar" >        
2.                <a href="#home" id='navbar_home' class='icon home' >首页</a>   
3.                <a href="#login" id='loginlink' class='icon home'>登陆</a>    
4.                <a  id='logoutlink' class='icon home'>注销</a>               
5.                <a href="#about" id='navbar_picture' class='icon picture'>关于我们</a>  
6.            </div>  

[javascript] view plaincopy

1. function logoutFun() {   
2.     $.ui.popup({  
3.         title: "提示",  
4.         message: "确定注销吗",  
5.         cancelText: "取消",  
6.         cancelCallback: function () { },  
7.         doneText: "确定",  
8.         doneCallback: function () { logoutSureFun() },  
9.         cancelOnly: false  
10.     });  
11. }  
12.   
13. function logoutSureFun() {  
14.      var url = serviceUrl + "UIPhoneAjax/GetData.ashx?type=logout";  
15.             $.post(url, null, function (res) {  
16.                 if (res.IsSuccess) {                                         
17.                     $("#loginlink").show();  
18.                     $("#logoutlink").hide();                   
19.                 } else {                 
20.                    $.ui.popup(res.Msg);  
21.                 }  
22.       }, "json", function () { $.ui.hideMask(); $.ui.popup("网络连接失败！"); })                                  
23.  }  

需要注意的时，使用此弹出必须添加相关的插件af.popup.js

   在移动app开发中会经常使用到viewport指令，  ViewPort <meta>标记用于指定用户是否可以缩放Web页面，如果可以，那么缩放到的最大和最小缩放比例是什么。ViewPort <meta>标记的content值是由指令及其值组成的以逗号分隔的列表。

[html] view plaincopy

1. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">  

 width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度，height指令使用device-height标记指示视区高度为设备的屏幕高度。

2 initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档。

3maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同，这些指令的值是应用于视区内容的缩放比例。

4user-scalable指令指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。

参考

参考

a标签，在AFUI中添加了几个很特殊的属性。

1 data-transition表示panel如何出现，有一定的动画效果。

       例如：   

[html] view plaincopy

1. data-transition="pop"   

  可以使用的参数有slide, up, down, flip, fade, pop,  none，默认为slide 

2data-persist-ajax="true"指定一个页面，会把制定的页面加载到DOM中。

  感觉和panel的data-defer有些类似。但却不能在指定页面中有ajax请求，否则会出现空白，也就是加载失败。指定的文件内容限制和data-defer制定的文件初步测试也是一样的。

例如：

[html] view plaincopy

1. <div id="home" class="panel"  selected="true"  data-tab="navbar_home" data-nav="main">   
2.  <a href="about.html" id='A2' data-persist-ajax="true"  class='icon home big' >关于我们</a>            
3.  </div>   

3data-refresh-ajax="true"指定一个页面，会把制定的页面加载到DOM中，可以包含ajax请求。

4data-ignore="True"会把a标签作为一般的标签，jqMobi不会进行特殊处理。

例如：

[html] view plaincopy

1. <a href="index.html?bb" data-ignore="True">Load BB10 Theme </a>  

初步测试data-persist-ajax="true"制定静态页面是可以的，data-refresh-ajax="true"在苹果系统上似乎有问题，但在Android上可以，不知道是我测试的问题还是因为我用的是模拟器。

官方文档

     官网上Scrolling写的很简单。但自己要使用，却得试验很多次。

   例如要实现如下简单的功能：也就是动态加载数据，不管用户向上拖动还是向下拖动，都动态加载数据。

第一步自然是研究demo了。demo一开始就有很多内容。

对应的脚本也很简单：

[javascript] view plaincopy

1. <script>  
2.                        var myScroller;  
3.                        $.ui.ready(function () {  
4.                            myScroller = $("#webslider").scroller(); //Fetch the scroller from cache  
5.                            //Since this is a App Framework UI scroller, we could also do  
6.                            // myScroller=$.ui.scrollingDivs['webslider'];  
7.                            myScroller.addInfinite();  
8.                            myScroller.addPullToRefresh();  
9.                            $.bind(myScroller, 'scrollend', function () {  
10.                                console.log("scroll end");  
11.                            });  
12.   
13.                            $.bind(myScroller, 'scrollstart', function () {  
14.                                console.log("scroll start");  
15.                            });  
16.                              
17.                            $.bind(myScroller, "refresh-trigger", function () {  
18.                                console.log("refresh-trigger");  
19.                            });  
20.                              
21.                            var hideClose;  
22.                            $.bind(myScroller, "refresh-release", function () {  
23.                                console.log("refresh-release");  
24.                                var that = this;  
25.                                clearTimeout(hideClose);  
26.                                hideClose = setTimeout(function () {  
27.                                    console.log("hiding manually refresh");  
28.                                    that.hideRefresh();  
29.                                }, 5000);  
30.                                return false; //tells it to not auto-cancel the refresh  
31.                            });  
32.   
33.                            $.bind(myScroller, "refresh-cancel", function () {  
34.                                console.log("refresh-cancel");  
35.                                clearTimeout(hideClose);  
36.                            });  
37.                              
38.                            $.bind(myScroller, "refresh-finish", function () {  
39.                                console.log("refresh-finish");  
40.                            });  
41.                              
42.                            myScroller.enable();  
43.   
44.                            $.bind(myScroller, "infinite-scroll", function () {  
45.                                var self = this;  
46.                                console.log("infinite triggered");  
47.                                $(this.el).append("<div id='infinite' style='height:60px;line-height:60px;text-align:center;font-weight:bold'>Fetching content...</div>");  
48.                                $.bind(myScroller, "infinite-scroll-end", function () {  
49.                                    $.unbind(myScroller, "infinite-scroll-end");  
50.                                    self.scrollToBottom();  
51.                                    setTimeout(function () {  
52.                                        $(self.el).find("#infinite").remove();  
53.                                        self.clearInfinite();  
54.                                        $(self.el).append("<div>This was loaded via inifinite scroll<br>More Content</div>");  
55.                                        self.scrollToBottom();  
56.                                    }, 3000);  
57.                                });  
58.                            });  
59.                            $("#webslider").css("overflow", "auto");  
60.                        });  
61.                    </script>  

  然后我删除了，不需要的div，发现，在没有任何内容后，没法拖动了！！看来在拖动之前必须添加一定的内容，然后才能拖动。我是用的是panel的属性data-load

基本的代码：

[html] view plaincopy

1. <div id="jiekuanshenpi" class="panel" data-load="loadFirstpage" data-defer="jiekuanshenpi.html"   data-tab="navbar_picture">      
2.              <script type="text/javascript">  
3.                function loadFirstpage() {  
4.         var url = serviceUrl + "UIPhoneAjax/GetData.ashx?type=jiekuanshenqinglist";  
5.         $.post(url, null, function (res) {  
6.             if (res.IsSuccess) {  
7.                 var obj = $.parseJSON(res.Msg);  
8.                 for (var i = 0; i < obj.length; i++) {  
9.                     var item = obj[i];  
10.                     ($("#jiekuanshenpi")).append("<div>" + item.SUNAME + "预借金额" + item.Fploanmoney + ";标题" + item.RR_TITLE + "申请时间" + item.RR_CREATEDATE + ";借款原因" + item.Floancause + "</div><br/>");  
11.                 }  
12.   
13.             } else {  
14.                 $("#afui").popup(res.Msg);  
15.             }  
16.         }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); })  
17.     }  
18.     </script>  
19.            </div>  

  查看页面元素，才发现，内容加的位置不对。

不是($("#jiekuanshenpi")).append（），而应该是jiekuanshenpi下的一个元素。

改为($("#jiekuanshenpi .afScrollPanel"))就好了。

第二步发现读取数据的提示信息会出现多次？

  测试demo没发现，看来是我哪块改错了。我知道是 $.bind(myScroller, "infinite-scroll",执行了多两次，但没有什么好方法，只能设置一个标志量了。

  加了标志量后，没有读取数据的提示信息只有一次了。

第三步 为了能够是每次读取的数据不一样，还应该添加一个标示量。例如：第几页。

第四步 向下拖动，给最上边添加数据

  初步测试demo只是每次都是先上拖动，给最下边添加读取的内容。

  在模拟器上测试发现，动态添加的  <ui class="list" ></ul>;有问题，但静态的是可以的。

  经过测试发现可以改写方法 $.bind(myScroller, "refresh-trigger", function () { {就可以满足需求。

   其他的几个方法：scrollend，scrollstart，refresh-trigger，refresh-cancel，refresh-finish目前尚未发现有什么作用。

 修改后的js代码：

[javascript] view plaincopy

1.    var pageindex = 0;  
2.      var isfinishread=true;  
3.      var myScroller;  
4.       function addDataToBottom(Msg) {        
5.           var obj = $.parseJSON(Msg);  
6.           var text=""  
7.             for (var i = 0; i < obj.length; i++) {  
8.                 var item = obj[i];  
9.                 text+="<div class='data'>" + item.SUNAME + "预借金额" + item.Fploanmoney + ";标题" + item.RR_TITLE + "申请时间" + item.RR_CREATEDATE + ";借款原因" + item.Floancause + "</div><br/>";  
10.             }  
11.             ($("#jiekuanshenpi .afScrollPanel")).append(text);  
12.       }  
13.         function addDataToTop(Msg) {        
14.             var obj = $.parseJSON(Msg);  
15.             var text="";  
16.             for (var i = 0; i < obj.length; i++) {  
17.                 var item = obj[i];                             
18.              text+="<div class='data'>" + item.SUNAME + "预借金额" + item.Fploanmoney + ";标题" + item.RR_TITLE + "申请时间" + item.RR_CREATEDATE + ";借款原因" + item.Floancause + "</div><br/>";  
19.             }  
20.            $(text).insertBefore( $("#jiekuanshenpi .data")[0]);  
21.       }  
22.      function loadFirstpage() {  
23.          var url = serviceUrl + "UIPhoneAjax/GetData.ashx?type=jiekuanshenqinglist";  
24.           var para = {  
25.                      pageindex: pageindex,                    
26.                  };  
27.          $.post(url, para, function (res) {           
28.              if (res.IsSuccess) {                 
29.                 addDataToBottom(res.Msg);  
30.              } else {  
31.                  $("#afui").popup(res.Msg);  
32.              }  
33.          }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); })  
34.          pageindex++;  
35.      }  
36.    
37.      $.ui.ready(function () {  
38.          myScroller = $("#jiekuanshenpi").scroller();  
39.          myScroller.addInfinite();  
40.          myScroller.addPullToRefresh();  
41.          $.bind(myScroller, 'scrollend', function () {  
42.             // console.log("scroll end");  
43.          });  
44.   
45.   
46.          $.bind(myScroller, 'scrollstart', function () {  
47.           //   console.log("scroll start");  
48.          });  
49.   
50.   
51.          $.bind(myScroller, "refresh-trigger", function () {  
52.            // console.log("refresh-trigger");  
53.             myScroller.scrollToTop();  
54.                var that = this;  
55.                  var para = {  
56.                      pageindex: pageindex,                    
57.                  };  
58.                  var url = serviceUrl + "UIPhoneAjax/GetData.ashx?type=jiekuanshenqinglist";  
59.                  $.post(url, para, function (res) {  
60.                    that.hideRefresh();  
61.                      if (res.IsSuccess) {   
62.                         addDataToTop(res.Msg)  
63.                         myScroller.scrollToTop();  
64.   
65.   
66.                      } else {  
67.                          $("#afui").popup(res.Msg);  
68.                      }                    
69.                  }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); });                
70.                  pageindex++;  
71.          });  
72.   
73.   
74.          var hideClose;  
75.          $.bind(myScroller, "refresh-release", function () {  
76.           //  console.log("refresh-release");              
77.              return false; //tells it to not auto-cancel the refresh  
78.          });  
79.   
80.   
81.          $.bind(myScroller, "refresh-cancel", function () {  
82.           //   console.log("refresh-cancel");  
83.          });  
84.   
85.   
86.          $.bind(myScroller, "refresh-finish", function () {  
87.          //   console.log("refresh-finish");  
88.          });  
89.   
90.   
91.          myScroller.enable();  
92.          $.bind(myScroller, "infinite-scroll", function () {  
93.           console.log("infinite-scroll");  
94.             if(!isfinishread)  
95.             {  
96.               return ;  
97.             }  
98.             isfinishread=false;  
99.              var self = this;             
100.              $(this.el).append("<div id='infinite' style='height:60px;line-height:60px;text-align:center;font-weight:bold'>正在读取数据</div>");                   
101.              $.bind(myScroller, "infinite-scroll-end", function () {  
102.                  $.unbind(myScroller, "infinite-scroll-end");  
103.                  self.scrollToBottom();  
104.                  var para = {  
105.                      pageindex: pageindex,                    
106.                  };  
107.                  var url = serviceUrl + "UIPhoneAjax/GetData.ashx?type=jiekuanshenqinglist";  
108.                  $.post(url, para, function (res) {  
109.                      if (res.IsSuccess) {  
110.                          $(self.el).find("#infinite").remove();  
111.                           self.clearInfinite();  
112.                           addDataToBottom(res.Msg);                          
113.                           self.scrollToBottom();  
114.                      } else {  
115.                          $("#afui").popup(res.Msg);  
116.                      }  
117.                      isfinishread=true;  
118.                  }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); })  
119.                  pageindex++;  
120.              });  
121.          });  
122.          $("#jiekuanshenpi").css("overflow", "auto");  
123.      });  

重新改写后的公共代码

[javascript] view plaincopy

1. function ListCommon(detailItemIdField, detailItemTitleField,ajaxUrl, listPaneId, detailPanelId, listCommonVarName,uilistId) {  
2.     var pageindex = 1;  
3.     var isfinishread = true;  
4.     var myScroller;  
5.     var postInfo;  
6.     var DetailattrName = "CurrentDetailId";  
7.     var fullAjaxUrl;  
8.     var currentObj;  
9.     this.updateData = function () {  
10.         pageindex = 1;  
11.         if (!uilistId) {             
12.             $("#" + listPaneId + " .list").empty();  
13.         }  
14.         else {  
15.             $("#" + uilistId).empty();  
16.         }  
17.     }  
18.    this.GetPostInfo = function () {  
19.        return postInfo;  
20.    }  
21.    this.init = function () {        
22.        postInfo = {  
23.            pageindex: pageindex,  
24.            fields: detailItemIdField + "," + detailItemTitleField,  
25.            pageSize: 5,  
26.            sortname: detailItemIdField,  
27.            sortorder: "desc"  
28.        };  
29.        currentObj = this;  
30.        if (ajaxUrl.indexOf("type=") <= 0) {  
31.            fullAjaxUrl = serviceUrl + ajaxUrl + "?type=list";  
32.        }  
33.        else {  
34.            fullAjaxUrl = serviceUrl + ajaxUrl;  
35.        }  
36.        myScroller = $("#" + listPaneId).scroller();  
37.        myScroller.addInfinite();  
38.        myScroller.addPullToRefresh();  
39.   
40.   
41.        $.bind(myScroller, 'scrollend', function () {  
42.            // console.log("scroll end");  
43.        });  
44.        $.bind(myScroller, 'scrollstart', function () {  
45.            //   console.log("scroll start");  
46.        });  
47.        $.bind(myScroller, "refresh-trigger", function () {  
48.            // console.log("refresh-trigger");  
49.   
50.   
51.   
52.   
53.        });  
54.        var hideClose;  
55.        $.bind(myScroller, "refresh-release", function () {  
56.            myScroller.scrollToTop();  
57.            pageindex = 1;  
58.            var that = this;  
59.            postInfo = currentObj.GetPostInfo();  
60.            postInfo.pageindex = pageindex;  
61.            $.post(fullAjaxUrl, postInfo, function (res) {  
62.                that.hideRefresh();  
63.                if (res.IsSuccess) {  
64.                    $("#" + listPaneId + " .list").empty();  
65.                    addDataToBottom(res.Msg);  
66.                    myScroller.scrollToTop();  
67.   
68.   
69.                } else {  
70.                   
71.                    $("#afui").popup(res.Msg);  
72.                }  
73.            }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); });  
74.            return false;  
75.        });  
76.   
77.   
78.        $.bind(myScroller, "refresh-cancel", function () {  
79.            //   console.log("refresh-cancel");  
80.        });  
81.   
82.   
83.        $.bind(myScroller, "refresh-finish", function () {  
84.            //   console.log("refresh-finish");  
85.        });  
86.        myScroller.enable();  
87.        $.bind(myScroller, "infinite-scroll", function () {  
88.            //  console.log("infinite-scroll");  
89.            if (!isfinishread) {  
90.                return;  
91.            }  
92.            isfinishread = false;  
93.            var self = this;  
94.            $(this.el).append("<div id='infinite' style='height:60px;line-height:60px;text-align:center;font-weight:bold'>正在读取数据</div>");  
95.            $.bind(myScroller, "infinite-scroll-end", function () {  
96.                $.unbind(myScroller, "infinite-scroll-end");  
97.                self.scrollToBottom();  
98.                postInfo = currentObj.GetPostInfo();  
99.                postInfo.pageindex = pageindex;  
100.                $.post(fullAjaxUrl, postInfo, function (res) {  
101.                    if (res.IsSuccess) {  
102.                        $(self.el).find("#infinite").remove();  
103.                        self.clearInfinite();  
104.                        addDataToBottom(res.Msg);  
105.                        self.scrollToBottom();  
106.                    } else {  
107.                        $("#afui").popup(res.Msg);  
108.                    }  
109.                    isfinishread = true;  
110.                }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); })  
111.   
112.   
113.            });  
114.        });  
115.        $("#" + listPaneId).css("overflow", "auto");  
116.   
117.   
118.    }  
119.     this.setDetailId = function (id) {  
120.         $("#" + detailPanelId).attr(DetailattrName, id);  
121.     }  
122.   
123.   
124.     function CreateNewLine(Msg) {  
125.         var obj = $.parseJSON(Msg);  
126.         if (obj.length > 0) {  
127.             pageindex++;  
128.         }  
129.         var text = ""         
130.         for (var i = 0; i < obj.length; i++) {  
131.             var item = obj[i];  
132.             text += "<li> " + currentObj.CreateALink(item) + "</li>";  
133.         }  
134.         return text;  
135.     }  
136.     this.CreateALink= function (item)  
137.     {  
138.         if (!item) {return "";}  
139.         return "<a href=\"#" + detailPanelId + "\"  onclick=\"javascript:" + listCommonVarName + ".setDetailId('" + item[detailItemIdField] + "')\">" + item[detailItemTitleField] + "</a>";  
140.     }   
141.     function addDataToBottom(Msg) {  
142.         var text = CreateNewLine(Msg);  
143.         if (!uilistId) {  
144.             $("#" + listPaneId + " .list").append(text);  
145.         }  
146.         else {  
147.             $("#" + uilistId).append(text);  
148.          }  
149.     }  
150.   
151.   
152.     this.loadFirstPageData = function () {  
153.         var IsLongIn = CheckIsLongIn();  
154.         //   alert("IsLongIn" + IsLongIn);  
155.         if (!IsLongIn) {  
156.             return;  
157.         }  
158.   
159.   
160.         //   alert(length);  
161.         if (pageindex > 1) {  
162.             var length = $("#" + listPaneId + " .list").children().length;  
163.             if (length == 0) {  
164.                 pageindex = 1;  
165.             }  
166.             else {  
167.                 return;  
168.             }  
169.         }  
170.         $.ui.showMask("加载数据……");  
171.         postInfo = currentObj.GetPostInfo();  
172.         postInfo.pageindex = pageindex;  
173.         $.post(fullAjaxUrl, postInfo, function (res) {  
174.             if (res.IsSuccess) {  
175.                 addDataToBottom(res.Msg);  
176.             } else {  
177.                 $("#afui").popup(res.Msg);  
178.             }  
179.             $.ui.hideMask();  
180.         }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); })  
181.   
182.   
183.     }     
184. }  

   官网参考

其他几个事件官方说明

    PC端的web程序有很多种跳转方式，但使用jqMobi开发app页面之间如何跳转呢？

　　　还可以使用传统的a标签吗？

　　　分析jqMobi的demo，发现所有的页面都写在一个页面中，似乎也只能在这一个页面中跳转？

　　　使用panel属性data-defer把页面分开后，如何跳转呢？

　　　例如：一个列表页面list.html,单击某一条就跳转到详细信息页面。如何实现呢？

[html] view plaincopy

1. <div id="list" class="panel" data-load="loadFirstpage" data-defer="list.html"   data-tab="navbar_picture">   
2. </div>  

[html] view plaincopy

1. <a href="detail.html" data-persist-ajax="true" class='icon home big' >产品1</a>    
2.   <a href="detail.html" data-persist-ajax="true" class='icon home big' >产品2</a>  
3.   <a href="detail.html" data-persist-ajax="true" class='icon home big' >产品3</a>  
4.   <a href="detail.html" data-persist-ajax="true" class='icon home big' >产品4</a>  

 测试发现在IOS模拟器中不能加载的不同产品信息，看来这种方式不行。

难道真的只能在各个panel之间跳转吗？

 以上的需求如何实现？

  经过测试发现：

  似乎真的是只能在panel之间跳转，实现以上需求要做以下修改：

  第一步：在index.html中添加detailpanel

[html] view plaincopy

1. <div id="list" class="panel" data-load="loadFirstpage" data-defer="list.html"   data-tab="navbar_picture">   
2. </div>  
3.  <div id="detail" class="panel" data-load="loaddata" data-defer="detail.html"   data-tab="navbar_picture">   
4. </div>  

[html] view plaincopy

1. <a href="#detail" class='icon home big' >产品1</a>    
2. <a href="#detail"  class='icon home big' >产品2</a>  
3. <a href="#detail"  class='icon home big' >产品3</a>  
4. <a href="#detail"  class='icon home big' >产品4</a>  

第三步，就是在detail.html中根据list.html中的a标签 的不同值，来更新detail.html页面的具体显示内容。

   页面之间的传值方式参考使用jqMobi开发app基础：页面传值方式

        PC版的web程序两个两个页面之间的传值方式主要有,cookie,查询字符串,还可以通过服务端的session来交换数据.但app的传值方式呢?

     由于app基本都是单页面的方式,查询字符串这种方式似乎行不通了,至少目前个人还没有见到这种例子..

    主要有1HTML5 LocalStorage 本地存储，2隐藏字段，3扩展属性，4服务器端的session等

      1HTML5 LocalStorage 本地存储

      这种传值方式类似于cookie传值方式，是HTML5的新标准。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，

  前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。

   参考

     2隐藏字段

     在PC版的web程序中经常使用隐藏字段来存储一些特定的信息，在app中也可以使用，当然有一定限制，在单页面的app中可以传值，因为是单页面，最终会在内存中变成同一个dom，所以可以在一个panel中，设定隐藏字段，在另一个panel中读取隐藏字段。

  例如：   

[html] view plaincopy

1. <div id="jiekuanshenpi" class="panel" data-load="loadFirstpage" data-defer="jiekuanshenpi.html"   data-tab="navbar_picture">   
2.           </div>  
3.            <div id="jiekuanshenpiDetail" class="panel" data-load="loadjiekuanshenpiDetail"  data-defer="jiekuanshenpiDetail.html" jiekuanshenpiDetailId=""  data-tab="navbar_picture">  
4.           </div>  

3扩展属性

   使用的限制和原因与隐藏字段是一样的。

  例如：

   如上的代码，多加了一个扩展属性jiekuanshenpiDetailId

   在jiekuanshenpi.html页面中设定扩展属性jiekuanshenpiDetailId的值，  

[javascript] view plaincopy

1. $("#jiekuanshenpiDetail").attr("jiekuanshenpiDetailId",id);  

   在jiekuanshenpiDetail.html中读取jiekuanshenpiDetailId的值。

[javascript] view plaincopy

1. var jiekuanshenpiDetailId2 = $("#jiekuanshenpiDetail").attr("jiekuanshenpiDetailId");   

  这个和PC端的文本基本没有差别，服务端的传值方式基本都可以使用。

   使用jqMobi开发app，panel之间的跳转方式。根据当前页面的不同展现方式，主要有四种跳转方式。

    1当前页面是弹出的，关闭当前页面2当前页面不是弹出的，可以使用a标签3使用 $.ui.goBack()4任意panel的跳转

    1当前页面是弹出的，关闭当前页面

      例如登录页面因为使用了modal="true"，因此是弹出的，再登陆成功后，只需要关闭弹出窗体就可以返回到以前的页面。

    $.ui.hideMask();关闭遮罩层

     $.ui.hideModal(); 关闭弹出窗体

 具体可以参考

使用jqMobi开发app基础：登录页面的实现

2当前页面不是弹出的，可以使用a标签

   例如取消按钮，可以根据需要跳转到制定的panel。  

[html] view plaincopy

1. <a href="#jiekuanshenpi"  class="button" >取消</a>  

  例如在修改了某一条信息成功后，跳转到所有信息列表页面。可以使用$.ui.goBack();其实可手动点击效果是一样的。

 4任意panel的跳转

   可以使用 trigger，例如

[html] view plaincopy

1. $("#jiekuanshenpi").trigger("click");  

  还可以使用$.ui.loadContent(）

   实现和上边相同的跳转

[javascript] view plaincopy

1. $.ui.loadContent("#jiekuanshenpi", false, false, "pop");  

ui_loadContent参考