jQuery Mobile Disposition Grids
jQuery Mobile fournit un ensemble de dispositions de colonnes à base de CSS. Cependant, dispositions de colonnes ne sont généralement pas recommandés sur un appareil mobile, en raison de la largeur de l'écran du mobile.
Mais il y a des moments que vous souhaitez positionner des éléments plus petits, comme des boutons ou des onglets de navigation, côte à côte comme si elle était dans une table. Ensuite, les colonnes sont parfaits.
Les colonnes d'une grille sont d'égale largeur (et 100% de large au total), sans border, background, margin la padding border, background, margin ou de padding .
Il y a cinq grilles de mise en page qui peuvent être utilisés:
| Grille de classe | Colonnes | Largeur des colonnes | Correspond à | Exemple |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
Dans le récipient de colonne, les éléments enfants peuvent avoir la classe ui-block-a|b|c|d|e , en fonction du nombre de colonnes. Les colonnes flotteront côte à côte.
Exemple 1: Pour la grille-ui classe ( ce qui est une disposition en deux colonnes), vous devez spécifier deux éléments de l' enfant ui-block-a et ui-block-b .
Exemple 2: Pour ui-grid-b (trois colonnes mise en page), ajouter trois éléments de l' enfant ui-block-a, ui-block-b et ui-block-c .
Personnaliser Grids
Vous pouvez personnaliser vos 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>
Essayez - le vous - même » Vous pouvez également personnaliser vos blocs en utilisant des styles en ligne:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
plusieurs lignes
Il est également possible d'avoir plusieurs lignes à l'intérieur de vos colonnes.
Remarque: Le ui-block-a-class sera toujours créer 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>
Essayez - le vous - même » Grids Responsive
Sur les petits écrans, il est recommandé de ne pas avoir trop de boutons avec du texte côte à côte sur une ligne - que le texte pourrait se raccourcir.
Pour les réseaux sensibles, ajouter la classe ui-sensible au conteneur: