【初探移動前端開發04】jQuery Mobile (中)

時間 2019-11-18

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

原文原文鏈接

前言

昨天咱們一塊兒學習了一部分jquery mobile的知識，今天咱們繼續。javascript

這些是些很基礎的東西，有朋友以爲這個沒有其它的好，可是學習下不吃虧嘛，我反正也不會一塊兒學習基礎啦。css

例子請使用手機查看哦html

內容區域格式佈局

網格佈局

jquery mobile提供一種多列布局功能，因爲移動設備的屏幕大小緣由，通常狀況仍是不要使用多列布局啦。java

jquery mobile提供一種css樣式規則來定義多列布局，對應css爲ui-block，每列的樣式是經過定義前綴+「-a」等方式對網格的列進行佈局，a字母根據網格的列數而定。jquery

例如兩列布局CSS爲：ui-block-a與ui-block-bide

兩列網格佈局佈局

 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 class="ui-grid-a">
15         <div class="ui-block-a">
16             <input type="button" value="肯定" />
17         </div>
18         <div class="ui-block-b">
19             <input type="button" value="取消" />
20         </div>
21     </div>
22 </body>
23 </html>

http://sandbox.runjs.cn/show/tdwazgd4學習

咱們看見了他這些都是使用float佈局的。ui

兩列布局，須要指定外層div樣式是ui-grid-a，ui-grid-a樣式用於指定行列採用兩列布局樣式。編碼

以上兩個按鈕各佔屏幕的50%，採用data-line屬性對按鈕進行水平排列，按鈕寬度根據實際文本而定。

ui-grid-a 兩列
ui-grid-b 三列
ui-grid-c 四列
ui-grid-d 五列

咱們來看一個三列網格佈局：

 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 class="ui-grid-b">
15         <div class="ui-block-a">
16             <input type="button" value="肯定" />
17         </div>
18         <div class="ui-block-b">
19             <input type="button" value="取消" />
20         </div>
21         <div class="ui-block-c">
22             <input type="button" value="取消" />
23         </div>
24     </div>
25 </body>
26 </html>

http://sandbox.runjs.cn/show/wxkkjlfy

摺疊功能

摺疊塊是移動端常常用到的效果，只要使用jquery mobile約定的編碼規則而且利用HTML5的dataset特性，程序就能生成摺疊快了。

其中data-role設置爲collapsible，即可以建立一個可摺疊的內容區，來個例子吧：

 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="collapsible">
15     <h3>可摺疊區域</h3>
16     <p>刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵</p>
17   </div>
18 </body>
19 </html>

http://sandbox.runjs.cn/show/omulbkhg

form表單

咱們手機上的form表單其實都很漂亮了，可是咱們的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     <label for="name">
15         姓名</label>
16     <input type="text" name="name" id="name" />
17     <label for="password">
18         密碼</label>
19     <input type="password" name="password" id="password" />
20     <label for="content">
21         密碼</label>
22     <textarea name="content" id="content"></textarea>
23     <label for="number">
24         年齡</label>
25     <input type="number" name="number" id="number" />
26     <label for="tel">
27         手機</label>
28     <input type="tel" name="tel" id="tel" />
29     <label for="tel">
30         email</label>
31     <input type="email" name="email" id="email" />
32     <label for="tel">
33         url</label>
34     <input type="url" name="url" id="url" />
35     <label for="search">
36         搜索</label>
37     <input type="search" name="search" id="search" />
38 </body>
39 </html>

http://sandbox.runjs.cn/show/by9mvtu8

我這裏噴一下《HTML5移動Web開發指南》這本書！
唐駿開寫的，這傢伙寫的這本書不行，書中不少例子有問題。

Toggle類型

 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="fieldcontain">
15         <label for="slider">
16             打開開關：</label>
17         <select name="slider" id="slider" data-role="slider">
18             <option value="off">關閉</option>
19             <option value="on">開啓</option>
20         </select>
21     </div>
22 </body>
23 </html>

http://sandbox.runjs.cn/show/ty7aywwm

單選按鈕類型

咱們要建立一組單選按鈕須要這樣作：

 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     <fieldset data-role="controlgroup">
15         <legend>請選擇你的年齡範圍：</legend>
16         <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />
17         <label for="radio1">
18             不限</label>
19         <input type="radio" name="radio1" id="radio2" value="16-22" />
20         <label for="radio2">
21             16-22歲</label>
22         <input type="radio" name="radio1" id="radio3" value="23-30" />
23         <label for="radio3">
24             23-30歲</label>
25         <input type="radio" name="radio1" id="radio4" value="31-40" />
26         <label for="radio4">
27             31-40歲</label>
28         <input type="radio" name="radio1" id="radio5" value="40" />
29         <label for="radio5">
30             40歲以上</label>
31     </fieldset>
32 </body>
33 </html>

http://sandbox.runjs.cn/show/nwfuhvep

咱們看到，他仍是挺好看的哈。。。

咱們先是豎排，咱們設置一個橫排的單選按鈕看看：

 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     <fieldset data-role="controlgroup" data-type="horizontal">
15         <legend>請選擇你的年齡範圍：</legend>
16         <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />
17         <label for="radio1">
18             不限</label>
19         <input type="radio" name="radio1" id="radio2" value="16-22" />
20         <label for="radio2">
21             16-22歲</label>
22         <input type="radio" name="radio1" id="radio3" value="23-30" />
23         <label for="radio3">
24             23-30歲</label>
25     </fieldset>
26 </body>
27 </html>

http://sandbox.runjs.cn/show/vz3bjotg

複選框

單選完了咱們來看看複選框：

 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     <fieldset data-role="controlgroup" data-type="horizontal">
15         <legend>愛好：</legend>
16         <input type="checkbox" name="radio1" id="radio1" value="any" checked="checked" />
17         <label for="radio1">
18             足球</label>
19         <input type="checkbox" name="radio1" id="radio2" value="16-22" />
20         <label for="radio2">
21            籃球</label>
22         <input type="checkbox" name="radio1" id="radio3" value="23-30" />
23         <label for="radio3">
24             編碼（危險）</label>
25     </fieldset>
26 </body>
27 </html>

http://sandbox.runjs.cn/show/1zpxdut8

下拉菜單

 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="controlgroup">
15         <label class="select">
16             請選擇興趣
17             <select>
18                 <option>電影</option>
19                 <option>體育</option>
20                 <option>旅遊</option>
21             </select>
22         </label>
23 
24         <label class="select">
25             請選擇興趣（多選）
26             <select>
27                 <optgroup label="通常類">
28                     <option>電影</option>
29                     <option>體育</option>
30                     <option>旅遊</option>
31                 </optgroup>
32                 <optgroup label="特殊類">
33                     <option>C</option>
34                     <option>C++</option>
35                     <option>Java</option>
36                 </optgroup>
37             </select>
38         </label>
39     </div>
40 </body>
41 </html>

http://sandbox.runjs.cn/show/zu0zsl2w

咱們這裏作一點改變，樣式會發生變化：

 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="controlgroup">
15       <label class="select">
16             請選擇興趣
17             <select data-native-menu="false">
18                 <option>電影</option>
19                 <option>體育</option>
20                 <option>旅遊</option>
21             </select>
22         </label>
23 
24         <label class="select">
25             請選擇興趣
26             <select>
27                 <option>電影</option>
28                 <option>體育</option>
29                 <option>旅遊</option>
30             </select>
31         </label>
32 
33         <label class="select">
34             請選擇興趣（多選）
35             <select>
36                 <optgroup label="通常類">
37                     <option>電影</option>
38                     <option>體育</option>
39                     <option>旅遊</option>
40                 </optgroup>
41                 <optgroup label="特殊類">
42                     <option>C</option>
43                     <option>C++</option>
44                     <option>Java</option>
45                 </optgroup>
46             </select>
47         </label>
48     </div>
49 </body>
50 </html>