jQuery Form mobile

Table Responsive

responsive design est généralement utilisé pour adapter à l'utilisateur une variété de dispositifs mobiles.

Nous avons seulement besoin d'utiliser un nom de classe simple, jQuery Mobile ajuste automatiquement le contenu de la page en fonction de la taille de l'écran.

En réponse à la forme du contenu de la page sur les appareils mobiles et de bureau pour mettre fin à une bonne adaptation.

Table Responsive il existe deux types: refusion (reflux) et la commutation de colonne.

Formulaire Reflux

sous forme de modèle de Reflux suffisamment grande taille de l'écran est affiché horizontalement, alors que la taille de l'écran est assez petit, toutes les données deviendront verticalement.

Créer une table dans l'élément <table> pour ajouter des données-role = "table" et la catégorie "ui sensible":

Exemples

Essayez »

	Pour la forme sensible, vous devez inclure le <thead> et <tbody> élément. Ne pas utiliser l'attribut rowspan ou colspan; tableau sensibles ne sont pas pris en charge par ces deux propriétés.

la commutation de la colonne

modèle de commutation de colonne sera caché lorsque la largeur des données ne suffit pas.

Créer un commutateur de mode de colonne de table est la suivante:

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

Par défaut, jQuery Mobile va d'abord masquer la colonne à droite de la table. Cependant, vous pouvez spécifier l'ordre des colonnes masquées par l'ajout attribut data-priorité dans la tête de table (<th>), la valeur des données de priorité peut être de 1 (la plus haute priorité) à 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 la priorité ne figure pas, alors la colonne existera toujours et ne sera pas cachée.

La combinaison des deux ci-dessus des morceaux de code ensemble pour créer une table de commutation de colonne, de sorte que les utilisateurs peuvent personnaliser les colonnes que vous voulez cacher la table:

Exemples

<Table data-role = "Table " mode de données = "columntoggle" class = id "ui sensible" = "myTable">
<Thead>
<Tr>
<Th data-priority = "6 "> CustomerID </ th>
<Th> CustomerName </ th>
<Th data-priority = "1 "> ContactName </ th>
<Th data-priority = "2 "> Adresse </ th>
<Th data-priority = "3 "> Ville </ th>
<Th data-priority = "4 "> PostalCode </ 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 »

Nous pouvons utiliser l'attribut data-colonne-btn-texte pour modifier le texte de la table de commutation: