Grille mobile jQuery
JQuery Mobile Grid Layout
jQuery Mobile fournit un ensemble de dispositions de colonnes basées sur CSS. Cependant, sur les appareils mobiles, en raison de la largeur étroite de l'écran des téléphones mobiles, il n'est généralement pas recommandé d'utiliser la disposition en colonnes.
Mais parfois, vous souhaitez disposer des éléments plus petits, comme des boutons ou des étiquettes de navigation, côte à côte, comme dans un tableau. Dans ce cas, il est recommandé d’utiliser la disposition en colonnes.
Les colonnes de la grille ont une largeur égale (totalisant 100 %), sans bordures, arrière-plans, marges ou remplissage.
Quatre grilles de mise en page sont disponibles :
| 网格类 | 列 | 列宽 | 对应 | 实例 |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | 尝试一下 |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | 尝试一下 |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | 尝试一下 |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | 尝试一下 |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | 尝试一下 |
< img src="https://img.php.cn/upload/course/000/000/004/581a91163cf53671.jpg" alt="lampe" width="32" height="32"/>>< /th>< td>Dans le conteneur de colonnes, la classe appartenant aux éléments enfants est ui-block-a|b|c|d|e, selon le nombre de colonnes. Les colonnes flotteront côte à côte.
|
|---|
Grille personnalisée
En utilisant CSS, vous pouvez personnaliser les blocs de colonnes :
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<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>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>自定义列</h1>
</div>
<div data-role="main" class="ui-content">
<p>三列样式布局：</p>
<div class="ui-grid-b">
<div class="ui-block-a"><span>第一个列</span></div>
<div class="ui-block-b"><span>第二个列</span></div>
<div class="ui-block-c"><span>第三个列</span></div>
</div>
</div>
</div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Vous pouvez également personnaliser le bloc en utilisant des styles en ligne :
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
Plusieurs lignes
Vous pouvez également avoir plusieurs lignes dans une colonne.
REMARQUE : ui-block-a-class crée toujours une nouvelle ligne :
instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>多行</h1> </div> <div data-role="main" class="ui-content"> <p>三列布局:</p> <div class="ui-grid-b"> <div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-c" style="border:1px solid black;"><span>一些文本</span></div> </div> <p>多行的三列布局:</p> <div class="ui-grid-b"> <div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-c" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div> </div> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Responsive Grid
Sur les petits écrans, il n'est pas recommandé d'avoir trop de boutons côte à côte sur une même rangée (le texte sera raccourci).
Nous utilisons la classe ui-responsive dans le conteneur pour créer une grille réactive :
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>响应式布局</h1> </div> <div data-role="main" class="ui-content"> <h3>慢慢重置窗口大小。布局会根据浏览器的宽度变化自适应大小。</h3> <div class="ui-grid-b ui-responsive"> <div class="ui-block-a"> <a href="#" class="ui-btn ui-corner-all ui-shadow">第一列按钮</a><br> <span>第一列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span> </div> <div class="ui-block-b"> <a href="#" class="ui-btn ui-corner-all ui-shadow">第二列按钮</a><br> <span>第二列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span> </div> <div class="ui-block-c"> <a href="#" class="ui-btn ui-corner-all ui-shadow">第三列按钮</a><br> <span>第三列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span> </div> </div> </div> </div> </body> </html>
Instance en cours d'exécution»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
