jquery mobile 入門2 （組件2）

                                                        jquery mobile   入門2

二 . 組件2

1. 列表視圖

jQuery Mobile中的列表視圖是標準的HTML 列表; 有序(ol) 和 無序(ul)，應用方法就是在ul或ol標籤中添加data-role="listview"屬性。

1. <ol data-role="listview">
2. <li><a href="#">列表項m</a></li>
3. </ol>
4. <ul data-role="listview">
5. <li><a href="#">列表項</a></li>
6. </ul>

　　指定列表分割，給列表項

元素添加 data-role="list-divider" 屬性即可：

1. <ul data-role="listview">
2. <li data-role="list-divider">歐洲</li>
3. <li><a href="#">法國</a></li>
4. <li><a href="#">德國</a></li>
5. </ul>

　　 還可以通過ul或者ol的data-autodividers="true" 屬性設置可以配置爲自動生成的項目的分隔:

1. <ul data-role="listview" data-autodividers="true">
2. <li><a href="#">Adele</a></li>
3. <li><a href="#">Agnes</a></li>
4. <li><a href="#">Billy</a></li>
5. <li><a href="#">Calvin</a></li>
6. </ul>

data-autodividers="true" ： 該功能默認取第一個字符做分隔。

2.  網格

jQuery Mobile 提供了一套基於CSS的分列布局。可以通過對class屬性設置進行對網格佈局。要使用網格需要添加class='ui-grid-solo|a|b|c|d'，其中solo|a|b|c|d分別對應了以下的列數：ui-block-a(一列）、ui-block-a|b(兩列)、ui-block-a|b|c(三列)、ui-block-a|b|c|d(四列)、ui-block-a|b|c|d|e(五列)。即class 爲 ui-grid-b（三列布局），則必須添加 ui-block-a、ui-block-b 和 ui-block-c 的三個子元素。

如下代碼是一個三列布局。

1. <p>三列布局:</p>
2. <div class="ui-grid-b">
3. <div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div>
4. <div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div>
5. <div class="ui-block-c" style="border:1px solid black;"><span>一些文本</span></div>
6. </div>

3.滑動條

滑動條我們可以通過 < input type="range" >來創建，使用以下屬性來設置：

max - 規定允許的最大值
min - 規定允許的最小值
step - 規定合法的數字間隔
value - 規定默認值

如果想在按鈕中顯示進度的值可以添加 data-show-value="true" 屬性:

1. <input type="range" name="points" id="points" value="50" min="0" max="100" data-show-value="true">

如果想在滑動按鈕上顯示進度（類似一個小彈窗）可以使用 data-popup-enabled="true" 屬性:

1. <input type="range" id="points" value="50" min="0" max="100" data-popup-enabled="true">

4. 撥動開關

撥動開關通常用於 on/off 或 true/false 按鈕，可以使用 < input type="checkbox" > 元素並指定 data-role 爲 "flipswitch" 來創建開關。默認情況下，開關切換的文本爲 "On" 和 "Off"。可以使用 data-on-text 和 data-off-text 屬性來修改它。

1. <label>切換開關:</label>
2. <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False">

5. 頁面切換

jQuery Mobile 提供了各種頁面切換到下一個頁面的效果。使用data-transition屬性來進行切換。data-transition的屬性有：

fade、flip、flop、pop、slide、slidefade、slideup、slidedown、turn、none。

1. <a href="#anylink" data-transition="slide">切換到第二個頁面</a>

6.dialog

對話框是用於顯示頁面信息顯示或者表單信息的輸入。在鏈接中添加data-rel="dialog"讓用戶點擊鏈接時彈出對話框。

1. <div data-role="page" id="pageone">
2. <div data-role="main" class="ui-content">
3. <a href="#pagetwo" data-rel="dialog">彈出對話框</a>
4. </div>
5. </div>
6. <div data-role="page" id="pagetwo">
7. <div data-role="main" class="ui-content">
8. <a href="#pageone">跳轉到第一個頁面</a>
9. </div>
10. </div>