碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2013-07-13 20:53   4196    移動開發

前言

昨天我們一起學習了一部分jquery mobile的知識，今天我們繼續。

這些是些很基礎的東西，有朋友覺得這個沒有其它的好，但是學習下不吃虧嘛，我反正也不會一起學習基礎啦。

例子請使用手機查看哦

內容區域格式布局

網格布局

jquery mobile提供一種多列布局功能，由於移動設備的屏幕大小原因，一般情況還是不要使用多列布局啦。

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

例如兩列布局CSS為：ui-block-a與ui-block-b

兩列網格布局

 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布局的。

兩列布局，需要指定外層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>
View Code

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

結語

今天篇幅夠長了，我們下一篇再繼續吧。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 【初探移動前端開發05】jQuery Mobile (下) 一個簡單的特效引發的大戰之移動開發中我為什么放棄jquery mobile jQuery Mobile 移動開發中的日期插件Mobiscroll使用說明 【初探移動前端開發01】驚鴻一瞥 Hybrid App移動應用開發初探 分享20款移動開發中很有用的 jQuery 插件 使用jQuery Mobile和Phone Gap開發Android應用程序 PhoneGap與Jquery Mobile組合開發android應用的配置 PhoneGap&jQuery Mobile應用開發環境配置（For Android） 游戲開發中的矩陣初探
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM