【初探移動前端開發05】jQuery Mobile (下)

時間 2019-11-17

標籤初探移動前端開發05 jquery mobile 欄目 JQuery 简体版

原文原文鏈接

前言

繼續咱們移動端的學習，今天到了List相關了。javascript

本文例子請使用手機查看css

List列表

在移動設備平臺下，因爲移動設備屏幕比較小，咱們又是用手在上面點擊的觸屏方式，傳統的列表模式在手機上就不太友好了。html

雖然HTML5與CSS3提供了強大的界面實現方案，jquery mobile做爲jquery框架的一個移動web插件，他根據移動屏幕大小優化了UI組件，java

列表組件就是jquery mobile根據移動設備的特性而實現的組件庫之一。jquery

咱們來一個個看看咱們的列表吧ios

普通連接列表

 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/icriwnzeweb

多層次嵌套列表

 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/wc1n0stoajax

這個嵌套列表，咱們點擊第一個後即可以看到這個啦。數據庫

列表分隔符

咱們有時候會碰到須要對列表進行分組的功能，具備分組效果的列表能夠在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，而後就實戰一下下。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。