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

05 April 2014 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

jquery mobile

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

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

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

เราใช้ 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

ตัวอย่าง

โค้ดทั้งหมด

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

<!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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ