kandungan senarai jQuery Mudah alih

Ikon Senarai Mudah Alih jQuery

Secara lalai setiap item senarai akan mengandungi ikon anak panah "carat-r" (anak panah kanan). Jika anda ingin mengubah suai ikon ini, anda boleh menggunakan atribut ikon data:

Instance

<!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-inset="true">    
      <li><a href="#">默认是右箭头</a></li>
      <li data-icon="plus"><a href="#">data-icon="plus"</a></li>
      <li data-icon="minus"><a href="#">data-icon="minus"</a></li>
      <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
      <li data-icon="location"><a href="#">data-icon="location"</a></li>   
      <li data-icon="false"><a href="#">data-icon="false"</a></li>
    </ul>
  </div>
</div>

</body>

Jalankan instance»

Klik butang "Jalankan" Contoh" untuk melihat contoh dalam talian

	data-icon="false" 将会移除图标。

Untuk lebih banyak ikon butang jQuery Mudah Alih, sila lawati jQuery Mudah Alih kami Manual Rujukan Ikon .

ikon 16x16

Jika anda ingin menambah ikon standard 16x16px pada senarai anda, anda boleh menambah elemen <img> icon" Kelas:

Instance

<!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-inset="true">
      <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
      <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
      <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li>
      <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li>
      <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li>
    </ul>
  </div>
</div> 

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat dalam talian contoh

Lakaran Kecil Senarai Mudah Alih jQuery

Untuk imej yang lebih besar daripada 16x16px, sila tambah elemen <img>

jQuery Mobile akan menskalakan imej secara automatik kepada 80x80px:

Instance

<!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-inset="true">
      <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
      <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
      <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li>
      <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li>
      <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li>
    </ul>
  </div>
</div> 

</body>
</html>

Instance berjalan»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Gunakan HTML standard untuk menambah maklumat senarai:

Instance

<!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>

<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>包含缩略图的列表:</h2>
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="#"><img src="chrome.png"></a>
      </li>
      <li>
        <a href="#"><img src="firefox.png"></a>
      </li>
    </ul>
  </div>
</div>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

ikon senarai Mudah Alih jQuery

Digunakan dalam senarai <img> elemen class="ui-li-icon" Tambah ikon 16x16px:

Instance

<!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-inset="true">
      <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
      <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
      <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li>
      <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li>
      <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li>
    </ul>
  </div>
</div> 

</body>
</html>

Jalankan instance»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Butang pisah

Dalam senarai JQuery Mobile, kadangkala anda perlu melakukan dua yang berbeza operasi pada kandungan pilihan Dalam kes ini, anda memerlukan butang Pautan Pisah dalam pilihan. Cara untuk mencapai pembahagian ialah dengan menambah satu lagi elemen <a> pada elemen <li>

jQuery Mobile akan secara automatik menetapkan pautan kedua kepada ikon anak panah biru, dan teks pautan ikon (jika ada) akan dipaparkan apabila pengguna menuding tetikus. Ikon dipaparkan:

Instance

<!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-inset="true">
      <li>
        <a href="#">
        <img src="chrome.png">
        <h2>Google Chrome</h2>
        <p>Google Chrome 是免费的开源 web 浏览器。发布于 2008 年。</p>
        </a>
        <a href="#">文本信息</a>
      </li>
      <li>
        <a href="#">
        <img src="firefox.png">
        <h2>Mozilla Firefox</h2>
        <p>Firefox 是来自 Mozilla 的 web 浏览器。发布于 2004 年。</p>
        </a>
        <a href="#">文本信息</a>
      </li>
    </ul>
  </div>
</div>

</body>
</html>

Running Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Tambah beberapa halaman dan kotak dialog untuk menjadikan fungsi pautan lebih kaya:

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-inset="true">
      <li data-role="divider">浏览器</li>
      <li>
        <a href="#">
        <img src="chrome.png">
        <h2>Google Chrome</h2>
        <p>Google Chrome 是免费的开源 web 浏览器。发布于 2008 年。</p>
        </a>
        <a href="#download" data-transition="pop" data-icon="gear">下载浏览器</a>
      </li>
      <li>
        <a href="#">
        <img src="firefox.png">
        <h2>Mozilla Firefox</h2>
        <p>Firefox 是来自 Mozilla 的 web 浏览器。发布于 2004 年。</p>
        </a>
        <a href="#download" data-transition="pop" data-icon="gear">下载浏览器</a>
      </li>
    </ul>
  </div>
</div> 

<div data-role="page" id="download" data-dialog="true">
  <div data-role="main" class="ui-content">
   <h3>拆分按钮实例</h3>
    <p>该按钮仅供演示。</p>
    <a href="#" class="ui-btn ui-btn-inline ui-btn-b ui-shadow ui-corner-all ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini" data-rel="back">下载</a>
    <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-inline ui-mini" data-rel="back">取消</a>
  </div>
</div> 

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Nombor gelembung

Nombor gelembung digunakan untuk memaparkan nombor yang berkaitan dengan item senarai, seperti e-mel dalam peti mel:

Untuk menambah nombor gelembung, sila gunakan elemen sebaris, Untuk contoh <span>, tetapkan atribut kelas "ui-li-count" dan tambah nombor:

Instance

<!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-inset="true">
      <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>
  </div>
</div> 

</body>
</html>

Run Instance »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Nota: Untuk memaparkan nombor gelembung yang betul, kaedah pengaturcaraan mesti diubah suai. Ini akan dijelaskan dalam bab yang akan datang.

Lagi contoh

Senarai timbul
Cara membuat senarai pop timbul

Tukar lalai pautan ikon item senarai
Cara menetapkan ikon pautan lalai untuk item senarai (lalai ialah anak panah kanan

Senarai timbul boleh lipat
Cara membuat senarai timbul boleh lipat.

Senarai Boleh Dilipat
Cara membuat senarai tunjukkan/sembunyikan.

Lebih banyak format kandungan
Cara membuat kalendar.

kandungan senarai jQuery Mudah alih

Ikon Senarai Mudah Alih jQuery

Instance

ikon 16x16

Instance

Lakaran Kecil Senarai Mudah Alih jQuery

Instance

Instance

ikon senarai Mudah Alih jQuery

Instance

Butang pisah

Instance

Contoh

Nombor gelembung

Instance

Lagi contoh

Laman web PHP Cina