1、可折疊塊：
<div
data-role
="collapsible"
>
<
h1>點選我 - 我可以摺疊!
h1>
<
p>我是可折疊的內容。
p>
div>
備註：1> data-role="collapsible" 屬性。在容器（div）內，新增乙個標題元素（h1-h6） ;
2>預設情況下，內容是被摺疊起來的。如需在頁面載入時展開內容，請使用 data-collapsed="false";
3>摺疊模組：
巢狀摺疊：
<div
data-role
="collapsible"
>
<
h1>點選我 - 我可以摺疊!
h1>
<
p>我是被展開的內容。
p>
<
div
data-role
="collapsible"
>
<
h1>點選我 - 我是巢狀的可折疊塊！
h1>
<
p>我是巢狀的可折疊塊中被展開的內容。
p>
div>
div>
巢狀摺疊集合：
<div
data-role
="collapsible-set"
>
<
div
data-role
="collapsible"
>
<
h1>點選我 - 我可以摺疊！
h1>
<
p>我是被展開的內容。
p>
div>
<
div
data-role
="collapsible"
>
<
h1>點選我 - 我可以摺疊!
h1>
<
p>我是被展開的內容。
p>
div>
div>
2、列表：
<ol data-role
="listview" data-inset="true"
>
<
li><
a href
="#"
>列表項m
a>
li>
ol>
備註：1>應用方法就是在ul或ol標籤中新增data-role="listview"屬性
2>列表樣式的圓角和邊緣，使用 data-inset="true" 屬性設定;
3>列表分隔：
3.1>列表項也可以轉化為列表分割項，用來組織列表，使列表項成組。
指定列表分割，給列表項元素新增 data-role="list-divider" 屬性即可：
<ul data-role
="listview"
>
<
li data-role
="list-divider"
>歐洲
li>
<
li><
a href
="#"
>法國
a>
li>
<
li><
a href
="#"
>德國
a>
li>
ul>
<ul data-role
="listview"
data-autodividers
="true"
>
<
li><
a href
="#"
>adele
a>
li>
<
li><
a href
="#"
>agnes
a>
li>
<
li><
a href
="#"
>billy
a>
li>
<
li><
a href
="#"
>calvin
a>
li>
...ul
>
4>搜尋過濾：
實現客戶端搜尋功能，篩選列表的選項。只需新增 data-filter="true" 屬性即可；
通過設定mobileinit事件的繫結程式或者給 $.mobile.listview.prototype.options.filterplaceholder 選項設定乙個字串，或者給列表設定 data-filter-placeholder 屬性，可以設定搜尋輸入框的預設字元:
<ul data-role
="listview"
data-filter
="true"
data-filter-placeholder
="搜尋姓名"
>
3.1 圖示img顯示成所列圖，需要加上class="ui-li-icon"
<li><
a href
="#"
><
img
src="us.png"
alt="usa"
class
="ui-li-icon"
>usa
a>
li>
3.2 分割效果：
在jquery mobile的列表中，有時需要對選項內容做兩個不同的操作，這時，需要對選項中的鏈結按鈕進行分割。實現分割的方法是在元素中再增加乙個元素，便可以在頁面實現分割效果。
jquery mobile 會自動設定第二個鏈結為藍色箭頭的圖示，圖示的鏈結文字（如果有的話）將在使用者將滑鼠懸停在 圖示時顯示；
<ul data-role
="listview"
>
<
li>
<
a href
="#"
><
img
src="chrome.png"
>
a>
<
a href
="#"
>some text
a>
li>
ul>
3.3 氣泡數字：
如需新增氣泡數字，請使用行內元素，比如 ，設定 class "ui-li-count" 屬性並新增數字：
<ul data-role
="listview"
>
<
li><
a href
="#"
>收件箱<
span
class
="ui-li-count"
>25
span
>
a>
li>
<
li><
a href
="#"
>發件箱<
span
class
="ui-li-count"
>432
span
>
a>
li>
<
li><
a href
="#"
>垃圾箱<
span
class
="ui-li-count"
>7
span
>
a>
li>
ul>
jQuery Mobile 基礎事件
1.頁面初始化事件 pageinit 2.touch事件 使用者觸控螢幕時觸發 tap 使用者敲擊某個元素時觸發 p on tap function taphold 使用者敲擊某個元素並保持一秒時觸發 即按住不動 p on taphold function swipe 使用者在某個元素上水平滑動超過...
Jquery Mobile 開發小計
開啟你最喜歡的文字編輯器，把下面的頁面模板 貼上進去，儲存然後用瀏覽器開啟。你現在也是移動開發者了！在head裡，viewport的meta標籤將螢幕的寬度設定為了與裝置的寬度相同，並且從cdn引入了jquery,jquery mobile 和jquer。y mobile的主題樣式表。jquery ...
JQuery Mobile學習筆記
給header或者footer這樣的bar條設定為藍色背景，其中class ui bar b 是jqm自帶的，一共有ui bar a 黑色 ui bar b 藍色 ui bar c 比較淺的灰白 ui bar d 比較深的灰白 ui bar e 黃色 5中自帶的顏色。給需要設定背景的div裡加上相應...