# 列表標記的規約List markup conventions ## 1.基本的帶連接的列表 Basic linked list 列表的代碼為一個含 data-role="listview" 屬性無序列表ul。Jquery Mobile會把所有必要的樣式(列表項右出現一個向右箭頭，并使列表與屏幕同寬等)應用在列表上，使其成為易于觸摸的控件。當你點擊列表項時，Jquery Mobile 會觸發該列表項里的第一個鏈接，通過ajax請求鏈接的URL地址，在DOM中創建一個新的頁面并產生頁面轉場效果。 **html代碼** ``` <ul data-role="listview"> 　　<li><a href="index.html">Acura</a></li> 　　<li><a href="index.html">Audi</a></li> </ul> ``` **效果圖：**  ## 2.嵌套的列列表 Nested list 通過“ul” “ol”的li中嵌套子 ul ，ol你可以創建嵌套列表。當一個擁有子列表的列表項被點擊時，Jquery Mobile框架會生成一個新的ul頁面充滿屏幕，并自動生成一個為父列表項名稱為標題的header,以及一個子列表。這個動態生成的嵌套的列表默認的主題樣式“b"(藍色)，提示你是在二級菜單里。列表可以嵌套多層，Jquery Mobile會自動處理這些鏈接和頁面。 **html代碼** ``` <ul> 　<li>Pets 　　 <ul> 　　　<li><a href="index.html">Canary</a></li> 　　　 <li><a href="index.html">Cat</a></li> 　　 </ul> 　 </li> 　 <li>Farm animals 　　 <ul> 　　　 <li><a href="index.html">Chicken</a></li> 　　　 <li><a href="index.html">Cow</a></li> 　　 </ul> 　 </li> </ul> ``` **效果圖：**  ## 3.數字排序的列表Numbered list 通過有序列表ol可以創建數字排序的列表用來表現順序序列比如說搜索結果或者電影排行榜時非常有用。當增強效果應用到列表時，Jquery Mobile優先使用css的方式給列表添加編號，當瀏覽器不支持這種方式時，框架會采用JavaScript將編號寫入列表中。 **html代碼** ``` <ol data-role="listview"> 　 <li><a href="index.html">The Godfather</a></li> 　 <li><a href="index.html">Inception</a></li> </ol> ``` **效果圖：**  ## 4.只讀列表 Read-only list 列表也可以用來展示沒有交互的條目，通常會是一個內嵌的列表。通過有序或者無序列表都可以創建只讀列表，列表項內沒有鏈接即可，Jqmobil默認將他們的主題樣式為“c”白色無漸變色，并把字號設為比可點擊的列表項的小，以節省空間。 **html代碼** ``` <ul data-role="listview" data-inset="true"> 　 <li>Acura</li> 　 <li>Audi</li> </ul> ``` **效果圖：**  ## 5.拆分的按鈕列表 Split button lists 有時每個列表項會有多于一個操作，這時拆分按鈕用來提供2個獨立的可點擊的部分：列表項本身和列表項右邊的小icon。要創建這種拆分按鈕，在li 插入第二個鏈接即可，框架會創建一個豎直的分割線，并把鏈接樣式化為一個只有icon的按鈕，記得設置title屬性以保證可訪問性。 你可以通過指定data-split-icon屬性來設置位于右邊的分隔項的圖標（圖標詳情參見 圖標?分隔項的主題樣式可以通過 data-split-theme屬性來設置。 **html代碼** ``` <ul data-role="listview" data-split-icon="gear" data-split-theme="d"> 　<li> 　　<img src="images/album-bb.jpg" /> 　　<h3><a href="index.html">Broken Bells</a></h3> 　　<p>Broken Bells</p> 　　<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a> 　</li> 　<li> 　　<img src="images/album-hc.jpg" /> 　　<h3><a href="index.html">Warning</a></h3> 　　<p>Hot Chip</p> 　　<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a> 　</li> </ul> ``` **效果圖：**  ## 6.列表分割項 List dividers 列表項也可以轉化為列表分割項，用來組織列表，使列表項成組。給任意列表項添加data-role="list-divider" 屬性即可。默認情況下列表項的主題樣式為“b“淺灰)，但給列表（ul或ol）添加 data-dividertheme? 屬性可以設置列表分割項的主題樣式。 **html代碼** ``` <ul data-role="listview"> 　<li data-role="list-divider">A</li> 　 <li><a href="index.html">Adam Kinkaid</a></li> 　 <li><a href="index.html">Alex Wickerham</a></li> 　 <li><a href="index.html">Avery Johnson</a></li> 　 <li data-role="list-divider">B</li> 　 <li><a href="index.html">Bob Cabot</a></li> </ul> ``` **效果圖：**  ## 7.搜索過濾框 Search filter Jquery Mobile提供了一種非常方便的方式通過在客戶端進行的搜索機制過濾列表。要使一個列表可過濾，只需為列表設置data-filter="true" 屬性即可。框架會在列表上方增加一個搜索框，當用戶在搜索輸入框中輸入時，Jquery Mobile會自動過濾掉不含輸入字符的列表項。 搜索輸入框默認的字符為 "Filter items...".通過設置mobileinit事件的綁定程序或者給 $.mobile.listview.prototype.options.filterPlaceholder 選項設置一個字符串，或者給列表設置data-filter-placeholder屬性，可以設置搜索輸入框的默認字符。 **html代碼** ``` <ul data-role="listview" data-filter="true" > 　　<li><a href="index.html">Acura</a></li> 　　<li><a href="index.html">Audi</a></li> </ul> ``` **效果圖：**  ## 8.文本格式和計數氣泡 Text formatting & counts Jquery Mobile支持通過HTML語義化的標簽來顯示列表項中所需常見的文本格式（比如 標題/描述，二級信息，計數等） * ? 將數字用一個元素包裹，并添加ui-li-count的class,放置于列表項內，可以給列表項右側增加一個計數氣泡 * ? 要添加有層次關系的文本可以使用標題來強調，用段落文本來減少強調 * ? 補充信息（比如日期）可以通過包裹在class="ui-li-aside"的容器中來添加到列表項的右側 **html代碼** ``` <ul data-role="listview"> 　<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li> 　<li> 　　 <h3><a href="index.html">Stephen Weber</a></h3> 　　<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p> 　　 <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the Jquery team.</p> 　　 <p class="ui-li-aside"><strong>6:24</strong>PM</p> 　 </li> 　 <li> 　　 <h3><a href="index.html">Jquery Team</a></h3> 　　 <p><strong>Boston Conference Planning</strong></p> 　　 <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p> 　　 <p class="ui-li-aside"><strong>9:18</strong>AM</p> 　 </li> </ul> ``` **效果圖：**  **html代碼** ``` <ul data-role="listview"> 　<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li> 　 <li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li> </ul> ``` **效果圖：**  ## 9.列表項的縮略圖與圖標 Thumbnails & icons 要在列表項左側添加縮略圖，只需在列表項中添加一幅圖片作為第一個子元素即可。Jquery Mobile會自動縮放圖片為大小80px的正方形，而要使用標準?6*16的圖標作為縮略圖的話，為圖片元素添加ui-li-icon class即可 **html代碼** ``` <ul data-role="listview"> 　<li> 　　 <img src="images/album-bb.jpg" /> 　　 <h3><a href="index.html">Broken Bells</a></h3> 　　 <p>Broken Bells</p> 　 </li> 　 <li> 　　 <img src="images/album-hc.jpg" /> 　　<h3><a href="index.html">Warning</a></h3> 　　 <p>Hot Chip</p> 　 </li> </ul> ``` **效果圖：**  **html代碼** ``` <ul data-role="listview"> 　<li><img src="images/gf.png" alt="France" class="ui-li-icon"><a href="index.html">France</a> <span class="ui-li-count">4</span></li> 　 <li><img src="images/de.png" alt="Germany" class="ui-li-icon"><a href="index.html">Germany</a> <span class="ui-li-count">4</span></li> </ul> ``` **效果圖：**  ## 10.內嵌的列表 Inset lists 如果列表需要嵌入在有其他內容的頁面中，內嵌列表會將列表設為邊緣圓角，周圍留有magin的塊級元素。給列表（ul或ol）添加?data-inset="true"屬性?即可 **html代碼** ``` <ul data-role="listview" data-filter="true" > 　　<li><a href="index.html">Acura</a></li> 　　<li><a href="index.html">Audi</a></li> </ul> ``` **效果圖：**  ## 更新列表 Updating lists 如果你給列表項添加了列表項，你需要調用refresh()方法將列表的樣式更新并且將添加進的列表項生成嵌套列表。例如： $('ul').listview('refresh'); 我們目前正在改進refresh方法，所以請關注Github。