前言
繼續我們移動端的學習，今天到了List相關了。
本文例子請使用手機查看
List列表
在移動設備平台下，由於移動設備屏幕比較小，我們又是用手在上面點擊的觸屏方式，傳統的列表模式在手機上就不太友好了。
雖然HTML5與CSS3提供了強大的界面實現方案，jquery mobile作為jquery框架的一個移動web插件，他根據移動屏幕大小優化了UI組件，
列表組件就是jquery mobile根據移動設備的特性而實現的組件庫之一。
我們來一個個看看我們的列表吧
普通鏈接列表
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 <script id="jquery_182" type="text/javascript" class="library" 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 <script id="jquerymobile_120" type="text/javascript" class="library" 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 <div data-role="page"> 15 <header data-role="header"> 16 <h1> 17 普通鏈接列表</h1> 18 </header> 19 <div data-role="content"> 20 <ul data-role="listview" data-theme="g"> 21 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 22 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 23 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 24 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 25 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 26 </ul> 27 </div> 28 </div> 29 </body> 30 </html>
http://sandbox.runjs.cn/show/icriwnze
多層次嵌套列表
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 <script id="jquery_182" type="text/javascript" class="library" 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 <script id="jquerymobile_120" type="text/javascript" class="library" 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 <div data-role="page"> 15 <header data-role="header"> 16 <h1> 17 普通鏈接列表</h1> 18 </header> 19 <div data-role="content"> 20 <ul data-role="listview" data-theme="g"> 21 <li><a href="01.htm">刀狂劍痴葉小釵</a> 22 <p> 23 子級list</p> 24 <ul> 25 <li><a href="01.htm">清香白蓮素還真</a></li> 26 <li><a href="01.htm">清香白蓮素還真</a></li> 27 </ul> 28 </li> 29 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 30 <li><a href="01.htm">刀狂劍痴葉小釵</a> 31 <p> 32 子級list</p> 33 <ul> 34 <li><a href="01.htm">清香白蓮素還真</a></li> 35 <li><a href="01.htm">清香白蓮素還真</a></li> 36 </ul> 37 </li> 38 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 39 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 40 </ul> 41 </div> 42 </div> 43 </body> 44 </html>
http://sandbox.runjs.cn/show/wc1n0sto
這個嵌套列表，我們點擊第一個后便可以看到這個啦。
列表分隔符
我們有時候會碰到需要對列表進行分組的功能，具有分組效果的列表可以在li元素上設置data-role屬性為list-divider來實現。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 <script id="jquery_182" type="text/javascript" class="library" 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 <script id="jquerymobile_120" type="text/javascript" class="library" 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 <div data-role="page"> 15 <header data-role="header"> 16 <h1> 17 列表分割</h1> 18 </header> 19 <div data-role="content"> 20 <ul data-role="listview" data-theme="g"> 21 <li data-role="list-divider">霹靂三巨頭</li> 22 <li><a href="01.htm">清香白蓮素還真</a> </li> 23 <li><a href="01.htm">百世經綸一頁書</a> </li> 24 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 25 <li data-role="list-divider">火影三巨頭</li> 26 <li><a href="01.htm">宇智波斑</a> </li> 27 <li><a href="01.htm">初代火影</a> </li> 28 <li><a href="01.htm">六道仙人</a> </li> 29 <li data-role="list-divider">金光三巨頭</li> 30 <li><a href="01.htm">史艷文</a> </li> 31 <li><a href="01.htm">藏鏡人</a> </li> 32 <li><a href="01.htm">黑白郎君南宮很</a> </li> 33 </ul> 34 </div> 35 </div> 36 </body> 37 </html>
http://sandbox.runjs.cn/show/x34523jv
列表搜索
當設置data-filter為true時便具有了搜索功能了
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 <script id="jquery_182" type="text/javascript" class="library" 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 <script id="jquerymobile_120" type="text/javascript" class="library" 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 <div data-role="page"> 15 <header data-role="header"> 16 <h1> 17 列表分割</h1> 18 </header> 19 <div data-role="content"> 20 <ul data-role="listview" data-theme="g" data-filter="true"> 21 <li><a href="01.htm">清香白蓮素還真</a> </li> 22 <li><a href="01.htm">百世經綸一頁書</a> </li> 23 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 24 <li><a href="01.htm">宇智波斑</a> </li> 25 <li><a href="01.htm">初代火影</a> </li> 26 <li><a href="01.htm">六道仙人</a> </li> 27 <li><a href="01.htm">史艷文</a> </li> 28 <li><a href="01.htm">藏鏡人</a> </li> 29 <li><a href="01.htm">黑白郎君南宮很</a> </li> 30 <li><a href="01.htm">清香白蓮素還真</a> </li> 31 <li><a href="01.htm">百世經綸一頁書</a> </li> 32 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 33 <li><a href="01.htm">宇智波斑</a> </li> 34 <li><a href="01.htm">初代火影</a> </li> 35 <li><a href="01.htm">六道仙人</a> </li> 36 <li><a href="01.htm">史艷文</a> </li> 37 <li><a href="01.htm">藏鏡人</a> </li> 38 <li><a href="01.htm">黑白郎君南宮很</a> </li> 39 </ul> 40 </div> 41 </div> 42 </body> 43 </html>
http://sandbox.runjs.cn/show/f8oxhkfs
這個是界面上的搜索與數據庫沒關系。
內嵌列表
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 <script id="jquery_182" type="text/javascript" class="library" 9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 <script id="jquerymobile_120" type="text/javascript" class="library" 11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 <div data-role="page"> 15 <header data-role="header"> 16 <h1> 17 列表分割</h1> 18 </header> 19 <div data-role="content"> 20 <ul data-role="listview" data-theme="g" data-inset="true"> 21 <li><a href="01.htm">清香白蓮素還真<span class="ui-li-count">30</span></a> </li> 22 <li><a href="01.htm">百世經綸一頁書<span class="ui-li-count">30</span></a> </li> 23 <li><a href="01.htm">刀狂劍痴葉小釵<span class="ui-li-aside">本命</span></a> </li> 24 </ul> 25 <ol data-role="listview" data-theme="g" data-inset="true"> 26 <li><a href="01.htm">宇智波斑</a> </li> 27 <li><a href="01.htm">初代火影</a> </li> 28 <li><a href="01.htm">六道仙人</a> </li> 29 </ol> 30 <ul data-role="listview" data-theme="g" data-inset="true"> 31 <li><a href="01.htm">史艷文</a> </li> 32 <li><a href="01.htm">藏鏡人</a> </li> 33 <li><a href="01.htm">黑白郎君南宮很</a> </li> 34 </ul> 35 </div> 36 </div> 37 </body> 38 </html>
http://sandbox.runjs.cn/show/lpjnjowv
列表的性能問題
jquery mobile雖然提供了非常豐富的列表類型，但大部分類型都是針對不同需求而實現的內容格式列表。
實際上，jquery mobile並沒有實現列表的分頁功能，當數據量非常大時需要有分頁功能，在前面說過，jquery mobile提供一種可搜索過濾列表類型的列表。
前面我們就說了沒有通過數據庫檢索，可能出現數據量非常大的情況，對性能，對流量都不好，檢索時候可能出現假死的情況。
所以使用list功能需要慎重。
Event事件
好了，基本UI方面的我們就看完了，現在我們來看看事件方面的東西。
jquery mobile提供了豐富的事件處理機制，並且根據不同的移動設備，整合各種事件，使得開發者不必解決不同設備之間的事件處理差異。
頁面加載事件
我們在頁面中會使用
$(document).ready()
它的作用是當加載完成一個web頁面的Dom結構后就運行該方法。
在移動web應用程序時，仍然可以使用這個功能，但是jquery mobile的機制是每個視圖和頁面的內容都是使用ajax請求加載的，這樣每次顯示一個新視圖或者新頁面都沒辦法調用readey方法，這不是我們想要的結果。
所以針對jquery mobile提供了這個方法解決這個問題：pageCreate事件，該事件的含義是當視圖或頁面被切換時觸發的。
1 $('#page').live('pagecreate', function (e) { 2 alert('觸發之'); 3 });
touch事件
jquery mobile提供了最基本的觸摸事件：touch事件
tap：
快速觸摸屏幕並離開，類似於一次完整的點擊事件
taphold：
觸摸屏幕並保持一段時間
swipe：
在1秒內水平移動30px屏幕像素以上時觸發
swipeleft：
向左側滑動
swiperight：
向右側滑動
方向改變事件
orientationchange事件函數當移動設備方向發生改變時觸發。
在事件回調函數內的第二個參數返回一個用於識別當前方向的參數，該參數只會返回兩種值：portrait（縱向）和landscape（橫向）
但是該事件不是所有瀏覽器都支持，所以使用要慎重。
滾動事件
目前jquery mobile支持兩種滾動事件
scrollstart
開始滾動時觸發，需要注意是ios上該事件不穩定，原因是ios在滾動時會禁止dom操作
會將dom操作放入隊列中，待滾動結束后才執行這些操作，但是估計現在解決了。
scrollend
在滾動結束時觸發
顯示/隱藏事件
在基於jquery mobile的移動web應用中，我們知道一個web頁面存在多個不同的視圖或頁面，但每次只會顯示一個。
當顯示其中一個視圖時其余都會隱藏，每次視圖切換都會觸發顯示/隱藏事件
pagebeforeshow
當視圖通過動畫效果開始顯示在屏幕之前觸發事件
pagebeforehide
當視圖通過動畫效果開始隱藏之前觸發事件
pageshow
當視圖通過動畫效果顯示在屏幕之后觸發事件
pagehide
當視圖通過動畫效果隱藏后觸發事件
沒切換一次頁面，4鍾事件都會被觸發，例如：
當a視圖切換到b視圖時，首先觸發a視圖的pagebeforeshow事件和b視圖的pagebeforehide事件
當b視圖完成切換動畫效果后完整的顯示在屏幕中時，會觸發a視圖的pagehide事件和b視圖的pageshow事件
虛擬鼠標事件
jquery mobile提供了一種虛擬點擊事件來整合不同設備中mouse和touch事件
vmouseover
統一處理觸摸和鼠標懸停事件
vmousedown
統一處理觸摸和鼠標按下事件
vmousemove
處理觸摸和鼠標移動事件
vmouseup
處理觸摸和鼠標松開事件
vclick
處理觸摸和鼠標點擊事件
vmousecancel
處理觸摸和鼠標離開事件
結語
我們隊jquery mobile的學習暫時到這里，接下來我們在學習下phonegap，然后就實戰一下下。