grids ใน jQuery Mobile มีลักษณะ ความกว้าง 100% ไม่มีขอบ
สามารถกำหนด จำนวน คอลัมน์ ได้ไม่เกิน 5 คอลัมน์ โดยใช้รูปแบบ
เบื้องต้นดังนี้
เพิ่ม คลาส ui-grid- ต่อด้วย solo / a / b / c / d /
โดยจำนวนคอลัมน์ จะเท่ากับ 1 / 2 / 3 / 4 / 5 ตามลำดับ
โค้ด
<!-- สำหรับแสดง 1 คอลัมน์-->
<div class="ui-grid-solo">
</div><!-- /grid-solo -->
<!-- สำหรับแสดง 2 คอลัมน์-->
<div class="ui-grid-a">
</div><!-- /grid-a -->
<!-- สำหรับแสดง 3 คอลัมน์-->
<div class="ui-grid-b">
</div><!-- /grid-b -->
<!-- สำหรับแสดง 4 คอลัมน์ -->
<div class="ui-grid-c">
</div><!-- /grid-c -->
<!-- สำหรับแสดง 5 คอลัมน์ -->
<div class="ui-grid-d">
</div><!-- /grid-d -->
เมื่อได้ในส่วนของ เงื่อนไขว่า ต้องการแสดง กี่คอลัมน์
ส่วนต่อไป คือส่วนของ บล็อกคอลัมน์ ต้องมีจำนวน ตาม การกำหนดคอลัมน์ก่อนหน้า
โดยใช้ คลาส ui-block- ต่อด้วย a / b / c / d / e
ซึ่งก็คือ บล็อกที่ 1 / 2 / 3 / 4 / 5 ตามลำดับ
โค้ด
<div class="ui-grid-solo">
<div class="ui-block-a">A</div>
</div><!-- /grid-solo -->
<br>
<div class="ui-grid-a">
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
</div><!-- /grid-a -->
<br>
<div class="ui-grid-b">
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
</div><!-- /grid-b -->
<br>
<div class="ui-grid-c">
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
<div class="ui-block-d">D</div>
</div><!-- /grid-c -->
<br>
<div class="ui-grid-d">
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
<div class="ui-block-d">D</div>
<div class="ui-block-d">e</div>
</div><!-- /grid-c -->
<br>
กรณีต้องการให้ grids แสดงมากกว่า 1 แถว
ให้เราเพิ่ม ชุดของจำนวน คอลัมน์ เพิ่มเข้าไป
ตัวอย่าง โค้ดด้านล่าง แสดง 2 คอลัมน์ 1 แถว
<div class="ui-grid-a">
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
</div><!-- /grid-a -->
หากต้องการแถวที่สอง ให้ คัดลอก ชุดคอลัมน์ เพิ่มเข้าไป ได้ดังนี้
<div class="ui-grid-a">
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-a">C</div>
<div class="ui-block-b">D</div>
</div><!-- /grid-a -->
ตัวอย่างแสดงให้เห็นภาพ เราจะแทรกรูปภาพ เข้าไปใน แต่ละคอลัมน์
โดยกำหนดให้ขนาดรูปภาพมีความกว้าง 100%
โค้ดเกที่ยวกับ grids
<!DOCTYPE html>
<html>
<head>
<title>ใส่ไตเติล ตามใจชอบ</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- Start of page HOME -->
<div data-role="page" id="page_home">
<div data-role="header" data-position="fixed">
<a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a>
<h1>Home</h1>
<div data-role="navbar" >
<ul>
<li><a href="#" class="ui-btn-active" data-icon="heart">เมนู 1</a></li>
<li><a href="#" data-icon="calendar">เมนู 2</a></li>
<li><a href="#" data-icon="audio">เมนู 3</a></li>
<li><a href="#" data-icon="alert">เมนู 4</a></li>
<li><a href="#" data-icon="gear">เมนู 5</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<div class="ui-grid-solo">
<div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
</div><!-- /grid-solo -->
<br>
<div class="ui-grid-a">
<div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
</div><!-- /grid-a -->
<br>
<div class="ui-grid-b">
<div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-c"><img src="images/pic1.jpg" style="width:100%;" /></div>
</div><!-- /grid-b -->
<br>
<div class="ui-grid-c">
<div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-c"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-d"><img src="images/pic1.jpg" style="width:100%;" /></div>
</div><!-- /grid-c -->
<br>
<div class="ui-grid-d">
<div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-c"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-d"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-d"><img src="images/pic1.jpg" style="width:100%;" /></div>
</div><!-- /grid-c -->
<br>
<div class="ui-grid-a">
<div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-a"><img src="images/pic1.jpg" style="width:100%;" /></div>
<div class="ui-block-b"><img src="images/pic1.jpg" style="width:100%;" /></div>
</div><!-- /grid-a -->
<hr />
<div class="ui-grid-solo">
<div class="ui-block-a">A</div>
</div><!-- /grid-solo -->
<br>
<div class="ui-grid-a">
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
</div><!-- /grid-a -->
<br>
<div class="ui-grid-b">
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
</div><!-- /grid-b -->
<br>
<div class="ui-grid-c">
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
<div class="ui-block-d">D</div>
</div><!-- /grid-c -->
<br>
<div class="ui-grid-d">
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
<div class="ui-block-d">D</div>
<div class="ui-block-d">e</div>
</div><!-- /grid-c -->
<br>
<div class="ui-grid-a">
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-a">C</div>
<div class="ui-block-b">D</div>
</div><!-- /grid-a -->
</div><!-- /content -->
<div data-role="panel" id="left_panel" data-display="push">
<ul data-role="listview" data-icon="false" data-divider-theme="a">
<li data-role="list-divider">หัวข้อแบ่ง</li>
<li><a href="#">เมนูที่ 1</a></li>
<li><a href="#">เมนูที่ 2</a></li>
<li><a href="#">เมนูที่ 3</a></li>
<li><a href="#">เมนูที่ 4</a></li>
<li data-role="list-divider">หัวข้อแบ่ง</li>
<li><a href="#">เมนูที่ 6</a></li>
<li><a href="#">เมนูที่ 7</a></li>
</ul>
</div><!-- /panel -->
<div data-role="footer" data-position="fixed">
<h4>ส่วน footer ใส่ตามใจชอบ</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
ดาวน์โหลดโค้ดตัวอย่าง
