Derniers tutoriels de développement web
 

jQuery Mobile Liste Vues



jQuery Liste mobile Vues

vue sur la Liste dans jQuery Mobile sont des listes HTML standard; commandé (<ol>) et unordered (<ul>) .

Pour créer une liste, appliquer le data-role="listview" à la <ol> ou <ul> élément. Pour les articles tappable, spécifiez un lien à l' intérieur de chaque élément de la liste (<li>) :

Exemple

<ol data-role="listview" >
  <li><a href="#">List Item</a></li>
</ol>

<ul data-role="listview" >
  <li><a href="#">List Item</a></li>
</ul>
Essayez - le vous - même »

Pour coiffer vos listes avec des coins arrondis et une certaine marge, utilisez les data-inset="true" attribut:

Exemple

<ul data-role="listview" data-inset="true" >
Essayez - le vous - même »

Par défaut, les liens à l' intérieur d' un élément de la liste seront automatiquement transformer en un bouton (pas besoin de ui-class="btn" ou data-role="button" )


Liste diviseurs

Liste des diviseurs sont utilisés pour organiser et d'articles dans les catégories / sections groupe.

Pour spécifier une liste diviseur, ajouter le data-role="list-divider" attribut à un <li> élément:

Exemple

<ul data-role="listview">
  <li data-role="list-divider" >Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
Essayez - le vous - même »

Si vous avez une liste par ordre alphabétique, (par exemple un annuaire téléphonique) jQuery Mobile ajoute automatiquement diviseurs appropriés en définissant le data-autodividers = "true" sur le <ol> ou <ul> élément:

Exemple

<ul data-role="listview" data-autodividers="true" >
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>
Essayez - le vous - même »

Le data-autodividers = "true" crée des diviseurs avec en majuscules premières lettres du texte de l'élément.


Exemples

Autres exemples

Lecture seule listes
Comment créer des listes sans liens (ne sera pas des boutons et non tappable).

Panneaux
Comment insérer des panneaux à votre liste des articles.