Grid Mudah Alih jQuery
Reka Letak Grid Mudah Alih jQuery
jQuery Mobile menyediakan satu set susun atur lajur berasaskan CSS. Walau bagaimanapun, pada peranti mudah alih, disebabkan lebar skrin telefon mudah alih yang sempit, biasanya tidak disyorkan untuk menggunakan reka letak lajur.
Tetapi kadangkala anda ingin menyusun elemen yang lebih kecil, seperti butang atau label navigasi, sebelah menyebelah, seolah-olah dalam jadual. Dalam kes ini, adalah disyorkan untuk menggunakan susun atur lajur.
Lajur dalam grid adalah sama lebar (berjumlah hingga 100%), tanpa sempadan, latar belakang, jidar atau pelapik.
Terdapat empat grid reka letak tersedia:
| 网格类 | 列 | 列宽 | 对应 | 实例 |
|---|---|---|---|---|
| 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="lamp" width="32" height="32"/>< /th>< td>Dalam bekas lajur, kelas yang dimiliki oleh elemen anak ialah ui-block-a|b|c|d|e, bergantung pada bilangan lajur. Lajur akan terapung sebelah menyebelah.
|
|---|
Grid Tersuai
Dengan menggunakan CSS anda boleh menyesuaikan blok lajur:
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><>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Anda juga boleh menyesuaikan blok dengan menggunakan gaya sebaris:
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
Berbilang baris
Anda juga boleh mempunyai berbilang baris dalam lajur.
NOTA: ui-block-a-class sentiasa mencipta baris baharu:
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>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Grid Responsif
Pada skrin kecil, tidak disyorkan untuk mempunyai terlalu banyak butang bersebelahan dalam satu baris (teks akan dipendekkan).
Kami menggunakan kelas responsif ui dalam bekas untuk mencipta grid responsif:
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 Running»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
