ใช้งาน navbar เมนู หรือ รายการ link ใน jQuery Mobile ตอนที่ 3
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeejquery mobile
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery mobile
ไปที่
Copy
navbar เมนู หรือ รายการ link จะเป็นส่วนของ link ที่ใช้เชื่อมโยงไปหน้าต่างๆ
จัดอยู่ในตำแหน่ง ได้ทั้งในส่วนของ header และ footer
โค้ด navbar ของเรา ที่จะใช้งาน ในการทำความเข้าใจในครั้งนี้
<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 -->
data-icon คือ ตัวสำหรับ กำหนด icon เรากำหนดชื่อ ตามที่ jQuery Mobile มีมาให้
class="ui-btn-active" ตัวนี้ ถ้าเราใส่ ไว้ใน link ตัวไหน link ตัวนั้น ก็จะแสดงลักษณะ กำลัง
active หรือ link นั้นถูกคลิก
navbar ใส่ได้สูงสุด 5 เมนู สำหรับแถวเดียว
หากใส่มากกว่า 5 เมนู จะถูก แบ่งเป็น 2 คอลัมน์ และแสดงเป็นแถวลงมา จนเมนูแสดงหมด
ตัวอย่าง
โค้ต
<!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"> <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><!-- /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>
หากต้องการแสดง navbar ตรง footer ก็ให้นำ navbar ไปไว้ใน
<div data-role="footer" data-position="fixed"> แทน
ตอนนี้เรากำลังประกอบ หน้าตาเพจ ของ ด้วย jQuery Mobile ขึ้นมาทีเล็กละน้อย
ค่อยมีรูปร่างหน้าตาม เป็นระบบ และซับซ้อนมากขึ้น
ยังไม่ต้องนใจถึงรายละเอียด ค่อยๆ ศึกษาไปพร้อมกัน
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

Tags::
jquery mobile
เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก
กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ
ยังไม่เป็นสมาชิก
สมาชิกล็อกอิน
สมาชิกล็อกอิน
( หรือ เข้าใช้งานผ่าน Social Login )
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()