Grille jQuery Mobile

Grille de mise en page jQuery Mobile

jQuery Mobile propose un ensemble de solutions de mise en page en colonnes basées sur CSS. Cependant, il n'est généralement pas recommandé d'utiliser la mise en page en colonnes sur les appareils mobiles en raison de la limitation de la largeur de l'écran des appareils mobiles.

Cependant, parfois, vous avez besoin de positionner des éléments plus petits, comme des boutons ou des barres de navigation, comme c'est le cas dans un tableau et côte à côte. Dans ce cas, la mise en page en colonnes est tout à fait appropriée.

Les colonnes dans la grille sont de largeur égale (la largeur totale est de 100%), sans bordure, arrière-plan, marge extérieure ou marge intérieure.

Il existe quatre types de grilles de mise en page disponibles :

Classe de grille Colonne Largeur de colonne Correspondant Exemple
ui-grid-a 2 50% / 50% ui-block-a|b Test
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Test
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Test
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Test

Avis :Dans le conteneur de colonnes, en fonction du nombre de colonnes différentes, les éléments enfants peuvent être définis avec les classes ui-block-a|b|c|d|e. Ces colonnes flotteront côte à côte.

Exemple 1 : Pour la classe ui-grid-a (mise en page en deux colonnes), vous devez spécifier deux éléments enfants ui-block-a et ui-block-b.

Exemple 2 : Pour la classe ui-grid-b (mise en page en trois colonnes), ajoutez trois éléments enfants ui-block-a, ui-block-b et ui-block-c.

Personnalisation de la grille

Vous pouvez personnaliser les blocs de colonnes en utilisant CSS :

Exemple

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

Essayer par vous-même

Vous pouvez également personnaliser les blocs en utilisant des styles en ligne :

<div class="ui-block-a" style="border: 1px solid black;"><span>Texte..</span></div>

Lignes multiples

Il est également possible d'inclure plusieurs lignes dans une colonne.

Remarque :ui-block-a-class créera toujours une nouvelle ligne :

Exemple

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

Essayer par vous-même