PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แสดง panel แผงเมนูจัดการ ใน jQuery Mobile ตอนที่ 2

30 March 2014 By


ตอนที่ 2 จะเป็นการสร้าง panel หรือ แถบเมนูด้านซ้าย ขวา
ในเนื้อหานี้ เราจะรู้จัก วิธี 
1. การใช้งาน panel 
2. การใช้งาน link และ icons
3. การใช้งาน listview สำหรับแสดง ใน panel
 
ดาวน์โหลดไฟล์ตัวอย่าง ตอนที่ 2 ได้ที่
 
http://www.ninenik.com/demo/jqmobile/jqmobile_2.rar
 
ก่อนอื่นเราเริ่มต้น ที่หน้าแรก ว่างเปล่า ตามโค้ต ex2.php
 
ตัวอย่างหน้าแรก ว่างเปล่า
 
 
โค้ต
 
<!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">
		<h1>Home</h1>
	</div><!-- /header -->

	<div data-role="content">
      
	</div><!-- /content -->
    

	<div data-role="footer" data-position="fixed">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
    

    
</div><!-- /page -->

</body>
</html>

 
1. การใช้งาน panel 
 
    <div data-role="panel" data-display="push">

    </div><!-- /panel -->        
 
ให้แทรกโค้ด ส่วนของ panel ไว้ ก่อน หรือ หลัง 
ของส่วนเนื้อหา <div data-role="content">
ในที่นี้จะแทรกไว้ด้านหลัง และก่อน <div data-role="footer" data-position="fixed">
และกำหนด id ให้กับ panel สำหรับใช้อ้างอิงใช้งาน จะได้เป็น
 
    <div data-role="panel" id="left_panel" data-display="push">

    </div><!-- /panel -->    
 
โค้ต
 
<!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">
		<h1>Home</h1>
	</div><!-- /header -->

	<div data-role="content">
      
	</div><!-- /content -->
    
    <div data-role="panel" id="left_panel" data-display="push">

    </div><!-- /panel -->        

	<div data-role="footer" data-position="fixed">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
    

    
</div><!-- /page -->

</body>
</html>
 
2. การใช้งาน link และ icons
 
<a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a>
 
link และ icon ที่จะสร้าง เป็นส่วนสำหรับเรียกใช้งาน ให้แสดง panel 
ดูผลลัพธ์ รายละเอียดปลีกย่อย ค่อยศึกษา ทำความเข้าใจ เพิ่มในภายหลัง
 
href="#left_panel"   ส่วนนี้ สำหรับอ้างอิง ใช้งาน id ของ panel ที่เรากำหนด ก่อนหน้า
 
เราจะแทรกเมนู link นี้ ในส่วนของ header 
 
ตัวอย่าง
 
 
โค้ด
 
<!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><!-- /header -->

	<div data-role="content">
      
	</div><!-- /content -->
    
    <div data-role="panel" id="left_panel" data-display="push">

    </div><!-- /panel -->        

	<div data-role="footer" data-position="fixed">
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
    

    
</div><!-- /page -->

</body>
</html>
 
 
3. การใช้งาน listview สำหรับแสดง ใน panel
 
เมื่อเราสามารถแสดง panel แล้ว ต่อไปเรา จะให้ panel
นั้นแสดง แสดงเมนู โดยเราจะใช้งาน listview โดยเมนูใน listview 
จะไม่แสดง icon ตามโค้ดด้านล่าง
 
 
โดยเอาโค้ต listview นี้ไปแทรกเข้าไปใน panel
        <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>
 
ตัวอย่าง
 
 
โค้ต
 
<!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><!-- /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>
 
 
จบ ตอนที่ 2 เราจะเห็นหน้าตา ของ การใช้งาน panel และการแสดงเมนู
รายละเอียด ปลีกย่อย ในแต่ละส่วน จะอธิบายเพิ่มเติมต่อไป ในตอนนี้
ให้เราดูภาพรวมไปก่อน ว่า jquery mobile ทำอะไรได้บ้าง แสดงแบบไหนได้บ้าง
 
รอติดตาม เนื้อหา ตอนต่อไป

Tags:: jquery mobile

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

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





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