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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
jquery mobile

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

ดูแล้ว 9,238 ครั้ง




เราใช้ 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 ไม่มีเนื้อหาเพิ่มเติม
 
 
ตัวอย่างและโค้ด เนื้อหาในตอนนี้ ค่อนข้างมรมาก
ที่เอาโค้ดมาวางไว้ สำหรับ หาเราต้องการใช้งาน ก็สามารถ คัดลอก แล้วนำไปประยุกต์ได้เลย


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





Tags:: jquery mobile







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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ