Tutoriel jQuery...login
Tutoriel jQuery Mobile Classique
auteur:php.cn  temps de mise à jour:2022-04-11 13:58:34

vue de liste jQuery Mobile





vue de liste jQuery Mobile

Les vues de liste dans jQuery Mobile sont des listes HTML standard ordonnées (<ol>) et Non ordonné(<ul>).

Les vues de liste sont une fonctionnalité puissante de jQuery Mobile. Cela rendrait les listes standard non ordonnées ou ordonnées plus largement applicables. La méthode d'application consiste à ajouter l'attribut data-role="listview" à la balise ul ou ol. Ajoutez un lien vers chaque élément (<li>) sur lequel les utilisateurs peuvent cliquer :

Exemple

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

Exécuter l'instance »

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Style de liste coins et bords arrondis, utilisez Paramètre d'attribut data-inset="true" :

Exemple

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

Exécuter l'instance »

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne


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


liste délimitée

Les éléments de liste peuvent également être convertis en éléments fractionnés de liste, qui sont utilisés pour organiser des listes et regrouper des éléments de liste.

Pour spécifier la division de la liste, ajoutez l'attribut data-role="list-divider" à l'élément de liste<li>

Exemple

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

Exécuter l'instance »

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Si vous disposez d'une liste alphabétique (comme un annuaire téléphonique), vous pouvez configurer les délimiteurs pour les éléments générés automatiquement en définissant l'attribut data-autodividers="true" sur l'élément <ol> ou <ul>

Exemple

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

Exécuter l'instance »

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne


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

实例

Plus d'exemples

liste en lecture seule

Exemple

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

Exécuter l'instance »

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Comment créer une liste sans liens (pas de bouton et non cliquable).

Panel
Comment insérer un panneau dans une liste

Site Web PHP chinois