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
默认情况下,列表项的链接会自动变成一个按钮 (不需要 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
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