Paparan senarai mudah alih jQuery

Paparan senarai dalam jQuery Mobile ialah senarai HTML standard yang dipesan (<ol>) dan Tidak tertib(<ul>).

Paparan senarai ialah ciri yang berkuasa dalam jQuery Mobile. Ia akan menjadikan senarai standard tidak tertib atau tersusun lebih terpakai secara meluas. Kaedah aplikasi adalah untuk menambah atribut data-role="listview" pada teg ul atau ol. Tambahkan pautan pada setiap item (<li>) yang pengguna boleh klik pada:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>有序列表：</h2>
    <ol data-role="listview">
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ol>
    <h2>无序列表：</h2>
    <ul data-role="listview">
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ul>
  </div>
</div> 

</body>
</html>

Jalankan instance »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Senaraikan gaya bucu bulat dan tepi, gunakan tetapan atribut data-inset="true":

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>标准列表:</h2>
    <ul data-role="listview">
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ul><br>
    <h2>带有 data-inset="true" 属性的列表:</h2>
    <ul data-role="listview" data-inset="true">
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ul>
  </div>
</div> 

</body>
</html>

Jalankan instance »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

	默认情况下，列表项的链接会自动变成一个按钮 (不需要 data-role="button")。

senarai dihadkan

Item senarai juga boleh ditukar menjadi item pembahagian senarai, yang digunakan untuk menyusun senarai dan item senarai kumpulan.

Untuk menentukan pembahagian senarai, tambahkan atribut data-role="list-divider" pada elemen senarai<li>

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>List Dividers</h2>
    <ul data-role="listview">
      <li data-role="list-divider">欧洲</li>
      <li><a href="#">德国</a></li>
      <li><a href="#">英国</a></li>
      <li data-role="list-divider">亚洲</li>
      <li><a href="#">中国</a></li>
      <li><a href="#">印度</a></li>
      <li data-role="list-divider">非洲</li>
      <li><a href="#">埃及</a></li>
      <li><a href="#">南非</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Jalankan instance »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Jika anda mempunyai senarai abjad, (seperti buku telefon) anda boleh mengkonfigurasi pembatas untuk item yang dijana secara automatik dengan menetapkan atribut data-autodividers="true" pada elemen <ol>

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
  <h2>我的通讯录</h2>
  <ul data-role="listview" data-autodividers="true" data-inset="true">
    <li><a href="#">Adele</a></li>
    <li><a href="#">Agnes</a></li>
    <li><a href="#">Albert</a></li>
    <li><a href="#">Billy</a></li>
    <li><a href="#">Bob</a></li>
    <li><a href="#">Calvin</a></li>
    <li><a href="#">Cameron</a></li>
    <li><a href="#">Chloe</a></li>
    <li><a href="#">Christina</a></li>
    <li><a href="#">Diana</a></li>
    <li><a href="#">Gabriel</a></li>
    <li><a href="#">Glen</a></li>
    <li><a href="#">Ralph</a></li>
    <li><a href="#">Valarie</a></li>
  </ul>
  <p>data-autodividers="true" 属性通过对列表项文本的首字母进行大写来创建分隔符。</p>
  </div>
</div> 

</body>
</html>

Jalankan instance »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

	data-autodividers="true" 可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。

Lagi contoh

senarai baca sahaja

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>有序列表：</h2>
    <ol data-role="listview">
      <li>列表项目</li>
      <li>列表项目</li>
      <li>列表项目</li>
    </ol>
    <h2>无序列表：</h2>
    <ul data-role="listview">
      <li>列表项目</li>
      <li>列表项目</li>
      <li>列表项目</li>
    </ul>
  </div>
</div>

</body>
</html>

Jalankan instance »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Cara membuat senarai tanpa pautan (bukan butang dan tidak boleh diklik).

Panel
Cara memasukkan panel dalam senarai

Paparan senarai mudah alih jQuery