PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

30 March 2014 By Ninenik Narkdee
jquery mobile

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



ตอนที่ 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 ทำอะไรได้บ้าง แสดงแบบไหนได้บ้าง
 
รอติดตาม เนื้อหา ตอนต่อไป


อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ



บริการเว็บ server web hosting
บริการเว็บ server web hosting


Tags:: jquery mobile




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

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

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

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



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




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