contenu de la liste jQuery Mobile
Icônes de liste jQuery Mobile
Par défaut, chaque élément de la liste contiendra une icône de flèche "carat-r" (flèche droite). Si vous souhaitez modifier cette icône, vous pouvez utiliser l'attribut data-icon :
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>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher des exemples en ligne
 | data-icon="false" 将会移除图标。 |
|---|
Pour des icônes de boutons jQuery Mobile plus complètes, veuillez visiter notre jQuery Mobile Manuel de référence des icônes .
Icône 16x16
Si vous souhaitez ajouter une icône standard 16x16px à votre liste, vous pouvez ajouter l'élément <img> icône" Classe :
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>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne instance
Vignettes de la liste mobile jQuery
Pour les images de plus de 16x16px, veuillez ajouter un élément <img>
jQuery Mobile redimensionnera automatiquement l'image à 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 en cours d'exécution»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Utilisez le HTML standard pour ajouter des informations sur la liste :
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>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Icône de liste jQuery Mobile
Utilisé dans la liste <img> element class="ui-li-icon" Ajoutez une icône 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>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Bouton Split
Dans la liste JQuery Mobile, vous devez parfois effectuer deux opérations différentes opérations sur le contenu des options. Dans ce cas, vous avez besoin des boutons de lien divisé dans les options. La manière d'obtenir la segmentation consiste à ajouter un autre élément <a> à l'élément <li>, afin que l'effet de segmentation puisse être obtenu sur la page.
jQuery Mobile définira automatiquement le deuxième lien sur une icône en forme de flèche bleue, et le texte du lien de l'icône (le cas échéant) sera affiché lorsque l'utilisateur passe la souris. L'icône s'affiche :
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>
Instance en cours d'exécution»
Cliquez sur le bouton "Exécuter l'instance" pour afficher le instance en ligne
Ajouter quelques pages et boîtes de dialogue pour enrichir la fonction du lien :
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-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>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Numéros à bulles
Les numéros à bulles sont utilisés pour afficher les numéros liés aux éléments de liste, tels que les e-mails dans une boîte aux lettres :
Pour ajouter des numéros à bulles, veuillez utiliser des éléments en ligne, pour exemple <span>, définissez l'attribut de classe "ui-li-count" et ajoutez le numéro :
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>
Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour visualiser l'instance en ligne
Remarque : Pour afficher un numéro de bulle correct, la méthode de programmation doit être modifiée. Ceci sera expliqué dans un chapitre ultérieur.
Plus d'exemples
Liste contextuelle
Comment créer une liste contextuelle
Modifier le lien par défaut d'une liste Icône d'élément
Comment définir l'icône de lien par défaut pour les éléments de la liste (la valeur par défaut est la flèche droite
Liste contextuelle pliable
Comment créer une liste contextuelle pliable).
Liste pliable
Comment créer une liste afficher/masquer.
Plus de formats de contenu
Comment créer un calendrier.
