การใช้งาน grids เพื่อแสดงเป็นคอลัมน์ ด้วย jQuery Mobile ตอนที่ 6
เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdeejquery mobile
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery mobile
คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน
หรือไม่สามารถใช้งานได้แล้ว
ไปที่ Copy
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>
ดาวน์โหลดโค้ดตัวอย่าง
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

Tags::
jquery mobile
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()