前言
昨天我們一起學習了一部分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
結語
今天篇幅夠長了，我們下一篇再繼續吧。