jQuery Mobile是一個流行的JavaScript框架,可用于創建響應式的移動應用程序。其中一個很受歡迎的組件是層級表。
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">A</li>
<li><a href="#">Adam</a></li>
<li><a href="#">Avery</a></li>
<li data-role="list-divider">B</li>
<li><a href="#">Ben</a></li>
<li><a href="#">Bob</a></li>
</ul>
以上代碼會生成一個基本的層級表。data-role屬性告訴jQuery Mobile將其解釋為一個列表視圖。列表分隔符(data-role="list-divider")將名稱分成不同的類別。例如,上面的代碼將姓名分為A和B兩個類別。
您可以通過添加數據過濾器表單來使列表視圖更加交互。以下是一個使用數據過濾器的示例:
<div data-role="fieldcontain">
<input type="text" id="myFilter" data-type="search" data-theme="b" placeholder="Search…">
</div>
<ul data-role="listview" data-inset="true" data-filter="true">
<li data-role="list-divider">A</li>
<li><a href="#">Adam</a></li>
<li><a href="#">Avery</a></li>
<li data-role="list-divider">B</li>
<li><a href="#">Ben</a></li>
<li><a href="#">Bob</a></li>
</ul>
上面的代碼在列表視圖中添加了一個數據過濾器表單。用戶可以輸入姓名并查找匹配的結果。
層級表是jQuery Mobile中非常有用的一個組件。您可以根據需要添加分隔符、數據過濾器、按鈕和其他元素。試試它,并在自己的移動應用程序中使用它。
上一篇點九 css