ใช้งาน navbar เมนู หรือ รายการ link ใน jQuery Mobile ตอนที่ 3

31 March 2014 By Ninenik Narkdee

jquery mobile

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery mobile

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 มีมาให้

ดูได้ที่ http://demos.jquerymobile.com/1.4.2/icons/

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

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน

หริอ สมัครสมาชิก และล็อกอิน ด้วย Facebook

URL สำหรับอ้างอิง