Tableaux jQuery Mobile

Tableaux responsives

Le design responsive est généralement utilisé pour s'adapter aux différents appareils mobiles des utilisateurs.

Il suffit d'utiliser un simple nom de classe, et jQuery Mobile peut automatiquement adapter le contenu de la page à la taille de l'écran.

Les tableaux responsives permettent au contenu de la page de bien s'adapter sur les appareils mobiles et de bureau.

Il existe deux types de tableaux responsives :reflowetBascule de colonne。

Tableaux reflow

Les tableaux en mode Reflow sont affichés horizontalement lorsque la taille de l'écran est suffisamment grande, et lorsque la taille de l'écran devient suffisamment petite, toutes les données seront affichées verticalement.

Pour créer un tableau, ajoutez data-role="table" et la classe "ui-responsive" à l'élément <table> :

Exemple

Essayez-le vous-même »

	Pour les tableaux responsives, vous devez inclure les éléments <thead> et <tbody>. N'utilisez pas les attributs rowspan ou colspan ; ces deux attributs ne sont pas pris en charge dans les tableaux responsives.

Bascule de colonnes

Le mode de bascule de colonnes masque les données lorsque la largeur est insuffisante.

Un tableau à bascule de colonnes est créé comme suit :

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

Par défaut, jQuery Mobile masquera d'abord les colonnes situées à droite du tableau. Toutefois, vous pouvez spécifier l'ordre des colonnes masquées en ajoutant l'attribut data-priority aux en-têtes de tableau (<th>). La valeur de data-priority peut aller de 1 (priorité la plus élevée) à 6 (priorité la plus faible) :

<th>I will never be hidden</th>
<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>
<th data-priority="3">我是重要的列 - 我可能被隐藏</th>
<th data-priority="5">我是不怎么重要的列 - 我最先被隐藏</th>

	Si vous ne spécifiez pas de priorité pour une colonne, la colonne existera toujours et ne sera pas masquée.

Combinez les deux extraits de code ci-dessus pour créer un tableau à bascule de colonnes, afin que les utilisateurs puissent personnaliser les colonnes du tableau à masquer :

Exemple

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
<thead>
    <tr>
      <th data-priority="6">ID client</th>
      <th>Nom du client</th>
      <th data-priority="1">Nom du contact</th>
      <th data-priority="2">Adresse</th>
      <th data-priority="3">Ville</th>
      <th data-priority="4">Code postal</th>
      <th data-priority="5">Pays</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>1</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Obere Str. 57</td>
      <td>Berlin</td>
      <td>12209</td>
      <td>Allemagne</td>
    </tr>
</tbody>
</table>

Essayez-le vous-même »

Nous pouvons utiliser l'attribut data-column-btn-text pour modifier le texte du tableau à bascule :