Explication détaillée de l'utilisation de la disposition de la grille ui-grid dans la page mobile jQuery development_jquery

Sur les appareils mobiles, la largeur de l'écran est étroite, donc les mises en page à plusieurs colonnes ne sont généralement pas utilisées, mais vous devrez parfois disposer de petits éléments (comme des boutons ou des étiquettes de navigation côte à côte, par exemple) dans plusieurs colonnes. . Le framework Jquery Mobile fournit une méthode simple pour créer une disposition de colonnes basée sur CSS appelée ui-grid

Jquery Mobile propose quatre mises en page prédéfinies, qui peuvent être utilisées dans toutes les situations où des colonnes sont nécessaires

• Deux colonnes (en utilisant la classe ui-grid-a)
• Trois colonnes (en utilisant la classe ui-grid-b)
• Quatre colonnes (en utilisant la classe ui-grid-c)
• Cinq colonnes (en utilisant la classe ui-grid-d)

Les grilles ont 100 % de largeur, sont complètement invisibles (pas de bordures ni d'arrière-plan) et n'ont pas de marge ni de remplissage, elles n'interfèrent donc pas avec le style des éléments placés à l'intérieur. Dans un conteneur de grille, les éléments enfants se voient attribuer ui-block-a / b / c / d de manière continue, faisant flotter et juxtaposer chaque élément « bloc », formant une grille. La classe ui-block-a efface essentiellement le float et démarrera une nouvelle ligne (voir la grille à plusieurs lignes ci-dessous).

ui-grid-une disposition à deux colonnes

Créez une mise en page à deux colonnes (50/50 %). Ajoutez l'attribut ui-grid-a au premier calque (conteneur parent) et ajoutez ui-block-a et ui-block au deuxième calque (deux). sous-conteneurs). -b：

<div class="ui-grid-a">
 <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
 <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

La balise ci-dessus produit la présentation de contenu suivante :

Comme vous pouvez le constater, les grilles n'ont pas de style visuel par défaut ; elles affichent simplement le contenu côte à côte.

Les classes de grille peuvent être appliquées à n'importe quel conteneur. Dans l'exemple suivant, nous ajoutons une ui-grid-a, appliquons ui-block et les deux boutons s'étendent jusqu'à 50 % de la largeur de l'écran

<fieldset class="ui-grid-a">
 <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
 <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>  
</fieldset>

Veuillez noter que ce framework ajoute des marges gauche et droite aux boutons de la grille. Pour un seul bouton, vous pouvez utiliser la classe ui-grid-solo et la classe de bouton ui-block-a, comme l'exemple ci-dessous pour un div. Ces boutons auront la même marge

<div class="ui-grid-a">
 <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
 <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>  
</div>
<div class="ui-grid-solo">
 <div class="ui-block-a"><button type="v" data-theme="b">More</button></div>
</div>

Des classes de thème (sans attributs de thème de données) du système de thème peuvent être ajoutées à un élément, y compris des grilles. Dans le bloc suivant, nous avons ajouté deux classes : ui-bar pour ajouter la barre par défaut et ui-bar-e pour appliquer le dégradé d'arrière-plan et le style de police à l'exemple de thème de barre d'outils "E". À des fins d'illustration, un attribut inline style="height:120px" est également ajouté à chaque grille pour définir chaque hauteur standard.

disposition à trois colonnes ui-block-b

La configuration de la disposition de la grille utilise class=ui-grid-b sur les éléments conteneurs parents et 3 enfants, chacun avec sa classe ui-block-a/a/c respective, créant une disposition à une ligne et à trois colonnes (33/ 33 /33 %). Remarque : Ces blocs partagent le même thème de style que le cours, avec la disposition en grille clairement visible.

<div class="ui-grid-b">
 <div class="ui-block-a">Block A</div>
 <div class="ui-block-b">Block B</div>
 <div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

Cela produira une disposition en grille de 33/33/33 % pour notre contenu

disposition ui-block-c à quatre colonnes

Une rangée de quatre colonnes, grille 25/25/25/25 %, est obtenue en spécifiant class=ui-grid-c dans le conteneur parent et en ajoutant des quarts de blocs. Remarque : Ces blocs ont le même style de cours thématiques, la disposition en grille est bien visible

disposition ui-block-c à cinq colonnes

Une ligne et cinq colonnes, grille 20/20/20/20/20%, sont spécifiées par class= ui-grid-d
dans le conteneur parent

Mise en page multi-lignes et multi-colonnes

La conception de la grille regroupe les éléments sur plusieurs lignes. Par exemple, si vous spécifiez une grille à trois lignes et trois colonnes (ui-grid-b) dans un conteneur comportant neuf sous-blocs, elle sera remplacée par 3 lignes de 3 éléments chacune. Avoir une règle CSS claire pour les flottants et commencer une nouvelle ligne lorsque class=ui-block-a permet de garantir qu'une séquence répétitive de blocs attribués (A,B,C,A,B,C,etc) correspond au type de grille . Vous pouvez définir le premier conteneur de chaque ligne sur class=ui-block-a pour effacer le flottant, donc les classes des 9 sous-conteneurs doivent être : class=ui-block-(a,b,c,a,b ,c,a,b,c).

<div id="grid" class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
</div>

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>grid-layout demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
 
<div data-role="page">
 <div data-role="header">
  <h1>Grid Layout Example</h1>
 </div>
 <div data-role="content">
  <div class="ui-grid-a">
   <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
   <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
  </div><!-- /grid-a -->
 </div>
</div>
 
</body>
</html>