jquery mobile listview列表屬性(搜索自動填充檢索效果)

時間 2019-11-20

標籤 jquery mobile listview 列表屬性搜索自動填充檢索效果欄目 JQuery 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <link rel="stylesheet" type="text/css" href="../jquery.mobile-1.4.5.min.css">
 7 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script>
 8 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script>
 9 </head>
10 <body>
11 <ul data-role="listview"><!-- 無序列表 -->
12     <li>A</li>
13     <li>B</li>
14     <li>C</li>
15     <li>D</li>
16 </ul>
17 <ol data-role="listview">    <!-- 有序列表 -->
18     <li><a href="">A</a></li><!-- 改變成可點擊的狀態 -->
19     <li>1</li>
20     <li>1</li>
21     <li>1</li>
22 </ol>
23 <ul data-role="listview"><!-- 無序列表可點擊 -->
24     <li><a href="">A</a></li>
25     <li><a href="">A</a></li>
26     <li><a href="">A</a></li>
27     <li><a href="">A</a></li>
28 </ul>
29 <hr><!-- hr爲加一條橫線 -->
30 <ul data-role="listview" data-filter="true" data-inset="true">
31 <!-- 輸入a的時候只顯示a，輸入b只顯示b，刪除的話返回到最初的狀態 -->
32     <li><a href="#">A</a></li>
33     <li><a href="#">B</a></li>
34     <li><a href="#">C</a></li>
35     <li><a href="#">D</a></li>
36 </ul>
37 <br>
38 <!-- 過濾效果在只有一個輸入框的狀況下顯示的狀況下，下面的列表不進行加載 -->
39 <!-- 使用form表單提交的進行操做 -->
40 <form class="ui-filterable">
41     <input id="autoinput" data-type="search"><!-- 輸入框的id和類型data-type -->
42 </form>
43 <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput" data-input="true">
44 <!-- data-role="listview"清除了默認的列表樣式 -->
45 <!--指定無序列表內的屬性：  data-filter爲默認不展開 data-filter-reveal="true" 默認將其過濾掉，
46 data-input="#autoinput"經過form表單進行提交操做；data-input="true"指定爲可插入的狀態-->
47     <li><a href="#">A</a></li>
48     <li><a href="#">B</a></li>
49     <li><a href="#">C</a></li>
50     <li><a href="#">D</a></li>
51     <li><a href="#">A</a></li>
52     <li><a href="#">B</a></li>
53     <li><a href="#">C</a></li>
54     <li><a href="#">D</a></li>
55 </ul>
56 <!-- liru通信錄中的ABCD的索引內容 -->
57 <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
58 <!-- 有個顏色的加深效果，全部字母a的索引，全部字母b的索引，等等 -->
59 <!-- data-autodividers="true"生成對應的索引 -->
60     <li><a href="#">生成第一個字的索引&ldquo;&rdquo;</a></li>
61     <li><a href="#">B</a></li>
62     <li><a href="#">C</a></li>
63     <li><a href="#">D</a></li>
64     <li><a href="#">A</a></li>
65     <li><a href="#">B</a></li>
66     <li><a href="#">C</a></li>
67     <li><a href="#">D</a></li>
68 </ul>
69 </body>
70 </html>