JQuerymobile實例源代碼

時間 2019-11-13

原文原文鏈接

首頁咱們先來解釋一下下JQuerymobile是什麼，jQuery Mobile是JQuery 框架的一個組件（而非jquery的移動版本）。jQuery Mobile是一款基於HTML5的用戶界面系統是用於建立移動 Web 應用的前端開發框架，能夠應用於智能手機與平板電腦，並且使用 HTML5 和 CSS3 最小的腳原本佈局網頁。javascript

咱們先一部分一部分講解，最後在爲你們附上完整代碼。css

1 滑出面板

咱們再來解釋一下其中一些屬性的做用吧。html

data-role="panel"屬性用來建立面板。
data-display 屬性來控制面板的展現方式:
   ① overlay在內容上顯示面板
   ② push是同時"推進"面板和頁面。
   ③ reveal默認值，將頁面像幻燈片同樣從屏幕劃出，將面板顯示出來。前端

 1 <div data-role="panel" id="revealPanel" data-display="reveal">
 2     <p>已打卡127天</p>
 3     <a href="#"><img src="img/a.PNG">張三</a><br>
 4     <span>☆☆☆☆☆</span><br>
 5     <span>編輯個性簽名...</span>
 6         <div class="message">
 7             <ul>
 8                 <li>瞭解會員特權</li>
 9                 <li>QQ錢包</li>
10                 <li>個性裝扮</li>
11                 <li>個人收藏</li>
12                 <li>個人相冊</li>
13                 <li>個人文件</li>
14                 <li>免流量特權</li>
15             </ul>
16         </div>
17 </div>

2 元素的過濾

data-position="right"讓面板出如今屏幕的右側
   data-inset="true"：列表樣式的圓角和邊緣。
   元素的 data-autodividers="true" 屬性設置能夠根據字母順序排列的列表。
   data-role="listview"：列表視圖。

   你想過濾的元素必須使用 data-filter="true" 屬性。
   建立 <input> 元素並指定 id，元素上加上 data-type="search" 屬性。這樣就能建立基本的搜索字段。
   將 <input> 元素放置於一個表單中，表單 <form> 元素使用 "ui-filterable" 類 - 該類會調整搜索字段與過濾元素的外邊距。
   接着爲過濾的元素添加 data-input 屬性。該值須要是 <input> 元素的 id。java

 1 <div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right">
 2                 <h2>個人通信錄</h2>
 3                 <form class="ui-filterable">
 4                     <input id="myFilter" data-type="search" placeholder="根據名稱搜索..">
 5                 </form>
 6                 <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
 7                     <li>
 8                         <a href="#">張三</a>
 9                     </li>
10                     <li>
11                         <a href="#">李四</a>
12                     </li>
13                     <li>
14                         <a href="#">Albert</a>
15                     </li>
16                     <li>
17                         <a href="#">Billy</a>
18                     </li>
19                     <li>
20                         <a href="#">Bob</a>
21                     </li>
22                     <li>
23                         <a href="#">Calvin</a>
24                     </li>
25                     <li>
26                         <a href="#">Cameron</a>
27                     </li>
28                     <li>
29                         <a href="#">Chloe</a>
30                     </li>
31                     <li>
32                         <a href="#">Christina</a>
33                     </li>
34                     <li>
35                         <a href="#">Diana</a>
36                     </li>
37                     <li>
38                         <a href="#">Gabriel</a>
39                     </li>
40                     <li>
41                         <a href="#">Glen</a>
42                     </li>
43                     <li>
44                         <a href="#">Ralph</a>
45                     </li>
46                     <li>
47                         <a href="#">Valarie</a>
48                     </li>
49                 </ul>
50             </div>

3 頁面頂部工具條

data-role="header" 是在頁面頂部建立的工具條 (一般用於標題或者搜索按鈕)
data-dismissible 指定面板是否能夠經過點擊面板外部區域來關閉。有兩個參數 true | false
data-swipe-close 指定是否能夠經過滑動來關閉。有兩個參數 true | false

使用 ui-icon 類將圖標添加到按鈕上
ui-btn-b 修改按鈕顏色爲黑色，字體爲白色(默認爲灰色背景，黑色字體)。
ui-corner-all 爲按鈕添加圓角
ui-mini 製做小按鈕
ui-shadow 爲按鈕添加陰影
ui-icon-bars/ui-icon-plus:圖標樣式
ui-btn-icon-notext只想顯示圖標
默認狀況下，全部圖標都是白色的。若是須要改變圖標顏色爲黑色，能夠在元素添加 "ui-alt-icon"jquery

1 <div data-role="header">
2       <a href="#revealPanel" data-swipe-close="true" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>
3       <a href="#" class="ui-btn ui-btn-right ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>
5       <p align="center">消息</p>
6  </div>

4 頁面內容

data-role="main" 定義了頁面的內容，好比文本，圖片，表單，按鈕等。
"ui-content" 類用於在頁面添加內邊距和外邊距。
列表視圖就是在在ul或ol標籤中添加data-role="listview"屬性。
列表樣式的圓角和邊緣，使用 data-inset="true" 屬性設置框架

 1 <div data-role="main" class="ui-content">
 2                 
 3          <a href="#overlayPanel" class="ui-btn">搜索</a>
 4                 
 5           <ul data-role="listview" data-inset="true">
 6                 <li>
 7                    <a href="#pagetwo" data-transition="slide" data-direction="reverse"><img src="img/a.PNG">張三(點擊跳轉頁面)</a>
 8                  </li>
 9                   <li>
10                      <a href="#"><img src="img/b.PNG">李四</a>
11                   </li>
12                   <li>
13                      <a href="#"><img src="img/c.PNG">王二</a>
14                   </li>
15                   <li id="listview1">
16                      <a href="#"><img src="img/a.PNG">張五(向左滑動切換頁面)</a>
17                   </li>
18           </ul>
19 </div>

5 頁面底部工具條

data-role="footer" 用於建立頁面底部工具條。
使用 data-role="navbar" 屬性來定義導航欄
使用 data-icon 屬性在導航按鈕上添加圖標ide

 1 <div id="footer" data-role="footer" data-position="fixed">
 2             <div data-role="navbar">
 3                  <ul>
 4                     <li>
 5                         <a href="#" data-icon="comment">消息</a>
 6                     </li>
 7                     <li>
 8                        <a href="user.html" data-icon="user">聯繫人</a>
 9                     </li>
10                     <li>
11                       <a href="#" data-icon="star">動態</a>
12                     </li>
13                   </ul>
14             </div>
15    </div>

6 點擊須要跳轉的頁面(子頁)

data-fullscreen="true/false"規定工具欄是否一直固定在頂部或底部
data-tap-toggle= true | false 規定用戶是否可以經過點擊改變工具欄的可見性
如需建立一個可摺疊的內容塊，須要爲容器添加 data-role="collapsible" 屬性。
默認狀況下，內容是被摺疊起來的。如需在頁面加載時展開內容，請使用 data-collapsed="false"
data-role="collapsibleset"當一個新的塊被展開時，全部其餘的塊都會被摺疊起來。
data-mini= true | false 規定按鈕是小尺寸仍是常規尺寸
data-collapsed-icon="carat-r":定義摺疊面板的圖標。工具

 1 <div data-role="page" id="pagetwo" data-theme="b">
 2              <div data-role="header" data-position="fixed" data-fullscreen="true" >
 3                 <h1>歡迎來到個人主頁</h1>
 4              </div>
 5           <div data-role="main" class="ui-content" >
 6             <a href="#pageone" data-transition="slide" data-direction="reverse">點擊跳轉頁面(淡入第一個頁面)</a>
 7           
 8            <div data-role="collapsibleset">
 9               <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
10                       <h1>特別關心</h1>
11                      <ul data-role="listview">
12                       <li><a href="#">張三</a></li>
13                       <li><a href="#">李四</a></li>
14                       <li><a href="#">王二</a></li>
15                     </ul>
16                 </div>
17                 <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
18                       <h1>分組一</h1>
19                      <ul data-role="listview">
20                       <li><a href="#">張三</a></li>
21                       <li><a href="#">李四</a></li>
22                       <li><a href="#">王二</a></li>
23                     </ul>
24                 </div>
25                 <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
26                       <h1>分組二</h1>
27                      <ul data-role="listview">
28                       <li><a href="#">張三</a></li>
29                       <li><a href="#">李四</a></li>
30                       <li><a href="#">王二</a></li>
31                     </ul>
32                 </div>
33             </div>
34         </div>
35               
36           <div data-role="footer" data-position="fixed" data-fullscreen="true">
37             <h1>底部文本</h1>
38           </div>
39         </div>

7 滑動須要跳轉的頁面(子頁)

 1 <div data-role="page" id="class-page">  
 2   
 3        <div data-role="content">  
 4             <ul data-role="listview" id="listview2">  
 5                     <li>向右滑動切換頁面</li>  
 6                     <li>向右滑動切換頁面</li>  
 7                     <li>向右滑動切換頁面</li>  
 8              </ul>  
 9         </div>  
10   
11  </div>

滑動頁面的JS代碼：佈局

使用$.mobile.changePage()來切換頁面
swipeleft:向左滑動事件在用戶向左拖動元素大於30px時觸發
reverse：布爾類型，默認false。設定頁面轉場動畫的方向，設置爲true時將致使反方向的轉場。

 1 $(function() {
 2   
 3         $("#listview1").bind("swipeleft", function() {  
 4   
 5             $.mobile.changePage("#class-page");  
 6   
 7         });  
 8   
 9         $("#listview2").bind("swiperight", function() {  
10   
11             $.mobile.changePage("#pageone", {  
12                 transition : "flip",  
13                 reverse : true  
14             }, true, true);  
15   
16         });  
17   
18 });

8 完整實例代碼

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="utf-8" />
  6         <title></title>
  7         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8         <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
  9         <!--<link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.css" />-->
 10         <!--<link rel="stylesheet" href="css/jquery.mobile.theme-1.4.5.css" />-->
 11         <link rel="stylesheet" href="css/index.css" />
 12         <script type="text/javascript" src="js/jquery.js"></script>
 13         <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
 14         <script type="text/javascript" src="js/index.js"></script>
 15     </head>
 16 
 17     <body>
 18         <div data-role="page" id="pageone" data-transition="slide" data-direction="reverse">
 29             
 30             <div data-role="panel" id="revealPanel" data-display="reveal">
 31                 <p>已打卡127天</p>
 32                 <a href="#"><img src="img/a.PNG">張三</a><br>
 33                 <span>☆☆☆☆☆</span><br>
 34                 <span>編輯個性簽名...</span>
 35                 <div class="message">
 36                     <ul>
 37                         <li>瞭解會員特權</li>
 38                         <li>QQ錢包</li>
 39                         <li>個性裝扮</li>
 40                         <li>個人收藏</li>
 41                         <li>個人相冊</li>
 42                         <li>個人文件</li>
 43                         <li>免流量特權</li>
 44                     </ul>
 45                 </div>
 46             </div>
 47 
 61             <div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right">
 62                 <h2>個人通信錄</h2>
 63                 <form class="ui-filterable">
 64                     <input id="myFilter" data-type="search" placeholder="根據名稱搜索..">
 65                 </form>
 66                 <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
 67                     <li>
 68                         <a href="#">張三</a>
 69                     </li>
 70                     <li>
 71                         <a href="#">李四</a>
 72                     </li>
 73                     <li>
 74                         <a href="#">Albert</a>
 75                     </li>
 76                     <li>
 77                         <a href="#">Billy</a>
 78                     </li>
 79                     <li>
 80                         <a href="#">Bob</a>
 81                     </li>
 82                     <li>
 83                         <a href="#">Calvin</a>
 84                     </li>
 85                     <li>
 86                         <a href="#">Cameron</a>
 87                     </li>
 88                     <li>
 89                         <a href="#">Chloe</a>
 90                     </li>
 91                     <li>
 92                         <a href="#">Christina</a>
 93                     </li>
 94                     <li>
 95                         <a href="#">Diana</a>
 96                     </li>
 97                     <li>
 98                         <a href="#">Gabriel</a>
 99                     </li>
100                     <li>
101                         <a href="#">Glen</a>
102                     </li>
103                     <li>
104                         <a href="#">Ralph</a>
105                     </li>
106                     <li>
107                         <a href="#">Valarie</a>
108                     </li>
109                 </ul>
110             </div>
111             
112            <div data-role="header">
135                  <a href="#revealPanel" data-swipe-close="true" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>  
137                  <a href="#" class="ui-btn ui-btn-right ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>
138                 <p align="center">消息</p>
139            </div>


14            <div data-role="main" class="ui-content">
148                 
149                 <a href="#overlayPanel" class="ui-btn">搜索</a>
150                 
151                 <ul data-role="listview" data-inset="true">
152                     <li>
153                         <a href="#pagetwo" data-transition="slide" data-direction="reverse"><img src="img/a.PNG">張三(點擊跳轉頁面)</a>
154                     </li>
155                     <li>
156                         <a href="#"><img src="img/b.PNG">李四</a>
157                     </li>
158                     <li>
159                         <a href="#"><img src="img/c.PNG">王二</a>
160                     </li>
161                     <li id="listview1">
162                         <a href="#"><img src="img/a.PNG">張五(向左滑動切換頁面)</a>
163                     </li>
164                 </ul>
165            </div>


166            <div id="footer" data-role="footer" data-position="fixed">
173                 <div data-role="navbar">
174                     <ul>
175                         <li>
176                             <a href="#" data-icon="comment" onclick="goTo('content.html')">消息</a>
177                         </li>
178                         <li>
179                             <a href="user.html" data-icon="user" onclick="goTo('content1.html')">聯繫人</a>
180                         </li>
181                         <li>
182                             <a href="#" data-icon="star" onclick="goTo('user.html')">動態</a>
183                         </li>
184                     </ul>
185                 </div>
186             </div>
187         </div>
188       
199         <div data-role="page" id="pagetwo" data-theme="b">
200              <div data-role="header" data-position="fixed" data-fullscreen="true" >
201                 <h1>歡迎來到個人主頁</h1>
202              </div>
203           <div data-role="main" class="ui-content" >
204             <a href="#pageone" data-transition="slide" data-direction="reverse">點擊跳轉頁面(淡入第一個頁面)</a>
205           
206            <div data-role="collapsibleset">
207               <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
208                       <h1>特別關心</h1>
209                      <ul data-role="listview">
210                       <li><a href="#">張三</a></li>
211                       <li><a href="#">李四</a></li>
212                       <li><a href="#">王二</a></li>
213                     </ul>
214                 </div>
215                 <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
216                       <h1>分組一</h1>
217                      <ul data-role="listview">
218                       <li><a href="#">張三</a></li>
219                       <li><a href="#">李四</a></li>
220                       <li><a href="#">王二</a></li>
221                     </ul>
222                 </div>
223                 <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
224                       <h1>分組二</h1>
225                      <ul data-role="listview">
226                       <li><a href="#">張三</a></li>
227                       <li><a href="#">李四</a></li>
228                       <li><a href="#">王二</a></li>
229                     </ul>
230                 </div>
231             </div>
232         </div>
233               
234           <div data-role="footer" data-position="fixed" data-fullscreen="true">
235             <h1>底部文本</h1>
236           </div>
237         </div> 
238         
239         
240          <div data-role="page" id="class-page">  
241   
242             <div data-role="content">  
243                 <ul data-role="listview" id="listview2">  
244                     <li>向右滑動切換頁面</li>  
245                     <li>向右滑動切換頁面</li>  
246                     <li>向右滑動切換頁面</li>  
247                 </ul>  
248             </div>  
249   
250         </div>  
251     </body>
252 
253 </html>

JS代碼：

 1 $(function() {
 2   
 3         $("#listview1").bind("swipeleft", function() {  
 4   
 5             $.mobile.changePage("#class-page");  
 6   
 7         });  
 8   
 9         $("#listview2").bind("swiperight", function() {  
10   
11             $.mobile.changePage("#pageone", {  
12                 transition : "flip",  
13                 reverse : true  
14             }, true, true);  
15   
16         });  
17   
18 });