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