PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ใช้งาน popup ใน jQuery Mobile ตอนที่ 8

05 April 2014 By


เราใช้ popup ทำอะไรบ้าง 
เราสามารถใช้งาน popup เพื่อแสดงเมนูลัด แสดงรูปภาพ แบบฟอร์ม
แผนที่ วิดีโอ หรืออื่นได้หลากหลาย จึงจำเป็น ที่ต้องศึกษาส่วนนี้ 
 
เริ่มต้นอย่างง่าย สร้าง popup พื้นฐาน
 
เรามี แท็ก a สำหรับ link และ div สำหรับ เป็น เนื้อหา popup
 
แท็ก div ส่วนของ popup เราต้องกำหนด attributes 2 ค่า คือ
data-rel="popup" และ iid เช่น id="my_basic_popup"
 
จะได้เป็น
 
<div data-role="popup" id="my_basic_popup">
<p>เนื้อหา และรายละเอียดที่จะแสดงใน popup</p>
</div>
 
แท็ก a จำเป็นต้องกำหนด attributes 2 ค่า เช่นกัน คือ
data-role="popup" และ href="#my_basic_popup"  จะเห็นความสัมพันธ์ในส่วน
ของ id ของแท็ก div ที่นำมาใช้ใน แท็ก a
 
 
ตัวอย่าง

 
โค้ดทั้งหมด

<!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">

		<br>
        
        <center>ตัวอย่าง ที่ 1</center><br>
        <a href="#my_basic_popup" data-rel="popup">Basic Popup</a>
        <div data-role="popup" id="my_basic_popup">
        <p>เนื้อหา และรายละเอียดที่จะแสดงใน popup</p>
        </div>
     
     	<br><br><hr>
        
        <center>ตัวอย่าง ที่ 2</center><br>
        <a href="#my_basic_popup2" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">
        Basic Popup 2
        </a>
        <div data-role="popup" id="my_basic_popup2">
        <p>เนื้อหา และรายละเอียดที่จะแสดงใน popup 2</p>
        </div>        
        
        <br><hr>
        
        <center>ตัวอย่าง ที่ 3</center><br>
        <p>ชื่อผู้ใช้ <a href="#popupInfo" data-rel="popup" data-transition="pop" class="ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more" style="border:0px;background:none;">เพิ่มเติม</a></p>
        <div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
          <p>ชื่อสมาชิกต้องเป็นภาษาอังกฤษ</p>
        </div>
        
		<br><hr>
        
        <center>ตัวอย่าง ที่ 4</center><br>
        <a href="#pic1" data-rel="popup" data-position-to="window" data-transition="fade">
        <img  src="images/pic1.jpg" alt="" style="width:30%">
        </a>
        <div data-role="popup" id="pic1" data-overlay-theme="b" data-theme="b" data-corners="false">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <img  src="images/pic1.jpg" style="max-height:512px;" alt="">
        </div>        

		<br><br><hr>

		<center>ตัวอย่าง ที่ 5</center><br>
        <a href="#popupMenu" data-rel="popup" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">การจัดการ...</a>
        <div data-role="popup" id="popupMenu" data-theme="b">
                <ul data-role="listview" data-inset="true" style="min-width:210px;">
                    <li data-role="list-divider">เลือกรายการ</li>
                    <li><a href="#">รายละเอียด</a></li>
                    <li><a href="#">แก้ไข</a></li>
                    <li><a href="#">ลบข้อมูล</a></li>
                </ul>
        </div>        


		<br><br><hr>
        
        <center>ตัวอย่าง ที่ 6</center><br>
        <a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" data-transition="pop">การจัดการ...</a>
        <div data-role="popup" id="popupNested" data-theme="none">
            <div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
                <div data-role="collapsible" data-inset="false">
                <h2>สำหรับสมาชิก</h2>
                    <ul data-role="listview">
                        <li><a href="#" data-rel="dialog">Menu 1</a></li>
                        <li><a href="#" data-rel="dialog">Menu 2</a></li>
                    </ul>
                </div><!-- /collapsible -->
                <div data-role="collapsible" data-inset="false">
                <h2>การตั้งค่า</h2>
                    <ul data-role="listview">
                        <li><a href="#" data-rel="dialog">Menu 3</a></li>
                        <li><a href="#" data-rel="dialog">Menu 4</a></li>
                    </ul>
                </div><!-- /collapsible -->
            </div><!-- /collapsible set -->
        </div><!-- /popup -->      
        
        
        <br><br><hr>

		<center>ตัวอย่าง ที่ 7</center><br>
         <a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">เข้าสู่ระบบ</a>
        <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
            <form>
                <div style="padding:10px 20px;">
                    <h3>กรุณาล็อกอิน</h3>
                    <label for="un" class="ui-hidden-accessible">ชื่อผู้ใช้:</label>
                    <input type="text" name="user" id="un" value="" placeholder="ชื่อผู้ใช้" data-theme="a">
                    <label for="pw" class="ui-hidden-accessible">รหัสผ่าน:</label>
                    <input type="password" name="pass" id="pw" value="" placeholder="รหัสผ่าน" data-theme="a">
                    <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">เข้าสู่ระบบ</button>
                </div>
            </form>
        </div>       
        

		<br><br><hr>
        
        <center>ตัวอย่าง ที่ 8</center><br>
        <a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">ลบรายการ...</a>
        <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
            <div data-role="header" data-theme="a">
            <h1>ลบรายการ?</h1>
            </div>
            <div role="main" class="ui-content">
                <h3 class="ui-title">ยืนย้นการลบรายการนี้?</h3>
            <p>หากลบแล้ว ไม่สามารถ เรียกคืนได้.</p>
                <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">ยกเลิก</a>
                <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">ลบ</a>
            </div>
        </div>        

    
	</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>
 
ตัวอย่างและโค้ดด้านบน จะรวมตัวอย่าง ที่น่าจะมีการใช้งาน
บ่อยเอาไว้ และจะขออธิบาย แต่ละส่วน ดังนี้
 
 
        <center>ตัวอย่าง ที่ 1</center><br>
        <a href="#my_basic_popup" data-rel="popup">Basic Popup</a>
        <div data-role="popup" id="my_basic_popup">
        <p>เนื้อหา และรายละเอียดที่จะแสดงใน popup</p>
        </div>
 
ตัวอย่าง ที่ 1 จะเป็นการแสดง popup ธรรมดา ไม่มีการกำหนดอะไรพิเศษ 
ปุ่ม link ไม่ได้กำหนด คลาส
 

        <center>ตัวอย่าง ที่ 2</center><br>
        <a href="#my_basic_popup2" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">
        Basic Popup 2
        </a>
        <div data-role="popup" id="my_basic_popup2">
        <p>เนื้อหา และรายละเอียดที่จะแสดงใน popup 2</p>
        </div>        
 
ตัวอย่างที่ 2 จะเป็นว่า มีการกหนด คลาส ให้กับปุ่ม link 
class="ui-btn ui-corner-all ui-shadow ui-btn-inline"
 
ui-btn คลาส สำหรับกำหนด มีรุปแบบ เป็นปุ่มกด
ui-corner-all คลาส สำหรับกำหนด ให้มุมโค้ดมน
ui-shadow คลาส สำหรับกำหนด ให้มีเงารอบๆ
ui-btn-inline คลาส สำหรับกำหนด แสดงปุ่มเป็นแนวเดียวกับข้อความ


        <center>ตัวอย่าง ที่ 3</center><br>
        <p>ชื่อผู้ใช้ <a href="#popupInfo" data-rel="popup" data-transition="pop" class="ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more" style="border:0px;background:none;">เพิ่มเติม</a></p>
        <div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
          <p>ชื่อสมาชิกต้องเป็นภาษาอังกฤษ</p>
        </div>
 
ตัวอย่างที่ 3 จะเป็นการกำหนด ปุ่ม link ให้มีลักษณะเป็น icons สำรหับแสดง tooltip
โดยปุ่ม link มี attributes เพิ่มเข้ามา คือ 
 
data-transition="pop" แสดง การเคลื่อนไหว popup แบบ pop (ค่อยๆ ขยายแสดง) 
กำหนด style เพื่อยกเลือกขอบของ ปุ่ม icons และพื้นหลัง style="border:0px;background:none;"
title="Learn more"  กำหนด title ของ icons
 
และมี คลาส สำหรับปุ่ม link 
class="ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext"
 
ui-btn คลาส สำหรับกำหนด มีรุปแบบ เป็นปุ่มกด
ui-alt-icon คลาส สำหรับสลับสี หรือเขียนทับการสลับสีของ icons
ui-corner-all คลาส สำหรับกำหนด ให้มุมโค้ดมน
ui-icon-info คลาส สำหรับรูป ไอคอน ชื่อ info
ui-nodisc-icon คลาส สำหรับไม่แสดง ขอบวงกลมรอบ icons 
ui-btn-inline คลาส สำหรับกำหนด แสดงปุ่มเป็นแนวเดียวกับข้อความ
ui-btn-icon-notext คลาส สำหรับแสดงเฉพาะ icons ไม่แสดงข้อความ
 
ส่วน attributes สำหรับ popup 
data-theme="a"  สำหรับ กำหนด theme ของ เนื้อหา popup
style="max-width:350px;" สำหรับ กำหนดความกว้างสูงสุด ของเนื้อหา popup
 
และคลาส สำหรับ popup
class="ui-content" 
ui-content สำหรับเพื่มช่องว่างพื้นที่ขอบ กับเนื้อหา มีค่า 15px


 
        <center>ตัวอย่าง ที่ 4</center><br>
        <a href="#pic1" data-rel="popup" data-position-to="window" data-transition="fade">
        <img  src="images/pic1.jpg" alt="" style="width:30%">
        </a>
        <div data-role="popup" id="pic1" data-overlay-theme="b" data-theme="b" data-corners="false">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <img  src="images/pic1.jpg" style="max-height:512px;" alt="">
        </div>   
 
ตัวอย่างที่ 4 จะเป็นการใช้กับการแสดง popup เป็นรูปภาพ ขนาดใหญ่กว่าเดิม
โดยปุ่ม link มี  attributes เพิ่มเข้ามาคือ 
data-position-to="window"  สำหรับ แสดง popup โดยอ้างอิงตำแหน่ง มี window / orgin / #ไอดีที่ต้องการ
data-transition="fade" แสดง popup แบบค่อยปรากฏค่อยชัดขึ้นมา
 
และสำหรับ popup
มี attributes เพิ่มเข้ามา
data-overlay-theme="b" data-theme="b" data-corners="false"
data-overlay-theme="b" กำหนด theme ให้พื้นหลังของตัวปิดทับ
data-theme="b" กำหนด theme ให้กับ popup
data-corners="false" กำหนดให้ เนื้อหา popup ไม่ต้องแสดงมุมแบบโค้งมน
 
นอกจากนั้น ใน popup จะมีการเพิ่ม ปุ่ม สำหรับปิดเข้าไป
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
 
มี attributes 
data-rel="back" สำหรับ ย้อนกลับหรือปิด popup
คลาสเพิ่มเติม
ui-btn-right คลาสสำหรับ แสดงปุ่มนี้ ในตำแหน่งด้านขวา
 

 
		<center>ตัวอย่าง ที่ 5</center><br>
        <a href="#popupMenu" data-rel="popup" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">การจัดการ...</a>
        <div data-role="popup" id="popupMenu" data-theme="b">
                <ul data-role="listview" data-inset="true" style="min-width:210px;">
                    <li data-role="list-divider">เลือกรายการ</li>
                    <li><a href="#">รายละเอียด</a></li>
                    <li><a href="#">แก้ไข</a></li>
                    <li><a href="#">ลบข้อมูล</a></li>
                </ul>
        </div>        
 
 
ตัวอย่างที่ 5 แสดงเมนู แบบ listview
สำหรับปุ่ม link มีคลาสใหม่เพิ่มเข้ามา 
ui-btn-icon-left  แสดง icons ไว้ที่ตำแหน่งด้านซ้ายของปุ่ม
ui-btn-a คลาส สำหรับ กำหนด theme ปุ่ม
 
ใสส่วน popup ก็เป็นการนำ listview มาแสดงแบบเมนู


 
 
        <center>ตัวอย่าง ที่ 6</center><br>
        <a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" data-transition="pop">การจัดการ...</a>
        <div data-role="popup" id="popupNested" data-theme="none">
            <div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
                <div data-role="collapsible" data-inset="false">
                <h2>สำหรับสมาชิก</h2>
                    <ul data-role="listview">
                        <li><a href="#" data-rel="dialog">Menu 1</a></li>
                        <li><a href="#" data-rel="dialog">Menu 2</a></li>
                    </ul>
                </div><!-- /collapsible -->
                <div data-role="collapsible" data-inset="false">
                <h2>การตั้งค่า</h2>
                    <ul data-role="listview">
                        <li><a href="#" data-rel="dialog">Menu 3</a></li>
                        <li><a href="#" data-rel="dialog">Menu 4</a></li>
                    </ul>
                </div><!-- /collapsible -->
            </div><!-- /collapsible set -->
        </div><!-- /popup -->      
 
 
ตัวอย่างที่ 6 เป็นการแสดง เมนูแบบ accordian ประยุกต์กับ listview 
รายละเอียดไม่มีอะไรเพิ่มเติม


 
		<center>ตัวอย่าง ที่ 7</center><br>
         <a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">เข้าสู่ระบบ</a>
        <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
            <form>
                <div style="padding:10px 20px;">
                    <h3>กรุณาล็อกอิน</h3>
                    <label for="un" class="ui-hidden-accessible">ชื่อผู้ใช้:</label>
                    <input type="text" name="user" id="un" value="" placeholder="ชื่อผู้ใช้" data-theme="a">
                    <label for="pw" class="ui-hidden-accessible">รหัสผ่าน:</label>
                    <input type="password" name="pass" id="pw" value="" placeholder="รหัสผ่าน" data-theme="a">
                    <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">เข้าสู่ระบบ</button>
                </div>
            </form>
        </div>       
 
ตัวอย่างที่ 7 เป็นการแสดง form ใน popup ไม่มีรายละเอียดคลาส ใหม่เพิ่มเติม
 

 
        <center>ตัวอย่าง ที่ 8</center><br>
        <a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">ลบรายการ...</a>
        <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
            <div data-role="header" data-theme="a">
            <h1>ลบรายการ?</h1>
            </div>
            <div role="main" class="ui-content">
                <h3 class="ui-title">ยืนย้นการลบรายการนี้?</h3>
            <p>หากลบแล้ว ไม่สามารถ เรียกคืนได้.</p>
                <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">ยกเลิก</a>
                <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">ลบ</a>
            </div>
        </div>        
 
ตัวอย่างที่ 8 เป็นการแสดง popup คล้าย ๆ การแสดง การยืนยันการดำเนินการ หรือ confirm ใน javascript
ตกแต่งด้วย css ไม่มีเนื้อหาเพิ่มเติม
 
 
ตัวอย่างและโค้ด เนื้อหาในตอนนี้ ค่อนข้างมรมาก
ที่เอาโค้ดมาวางไว้ สำหรับ หาเราต้องการใช้งาน ก็สามารถ คัดลอก แล้วนำไปประยุกต์ได้เลย

Tags:: jquery mobile

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

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


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





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