grids ใน jQuery Mobile มีลักษณะ ความกว้าง 100% ไม่มีขอบ
สามารถกำหนด จำนวน คอลัมน์ ได้ไม่เกิน 5 คอลัมน์ โดยใช้รูปแบบ
เบื้องต้นดังนี้
เพิ่ม คลาส ui-grid- ต่อด้วย solo / a / b / c / d /
โดยจำนวนคอลัมน์ จะเท่ากับ 1 / 2 / 3 / 4 / 5 ตามลำดับ
โค้ด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!-- สำหรับแสดง 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 ตามลำดับ
โค้ด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <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 แถว
1 2 3 4 | <div class="ui-grid-a"> <div class="ui-block-a">A</div> <div class="ui-block-b">B</div> </div><!-- /grid-a --> |
หากต้องการแถวที่สอง ให้ คัดลอก ชุดคอลัมน์ เพิ่มเข้าไป ได้ดังนี้
1 2 3 4 5 6 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | <!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> |
ดาวน์โหลดโค้ดตัวอย่าง
