มือถือ jQuery ป๊อปอัป
ป๊อบอัพมีความคล้ายคลึงกับไดอะล็อกในการที่พวกเขาทั้งสองซ้อนทับส่วนหนึ่งของเพจ กล่องป๊อปอัพจะมีประโยชน์เมื่อคุณต้องการที่จะแสดงข้อความเล็ก ๆ , ภาพถ่าย, แผนที่หรือเนื้อหาอื่น ๆ
เพื่อสร้างป๊อปอัพเริ่มต้นด้วย <a> องค์ประกอบและ <div> องค์ประกอบ เพิ่ม data-rel="popup" แอตทริบิวต์ <a> และ data-role="popup" แอตทริบิวต์ <div> จากนั้นระบุ ID สำหรับ <div> และตั้งค่า href ของ <a> ต้องตรงกับหมายเลขที่ระบุ เนื้อหาภายใน <div> เป็นเนื้อหาที่เกิดขึ้นจริงที่จะปรากฏขึ้นเมื่อผู้ใช้คลิกที่ลิงค์
หมายเหตุ: ป๊อปอัพ <div> ต้องอยู่ในหน้าเดียวกับการเชื่อมโยง
ตัวอย่าง
< a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline
ui-corner-all">Show Popup</a>
< div data-role="popup" id="myPopup" >
<p>This
is a simple popup.</p>
</div> ลองตัวเอง» ถ้าคุณต้องการบาง padding พิเศษและอัตรากำไรขั้นต้นในกล่องป๊อปอัพของคุณเพิ่ม "ui-content" ชั้น <div> :
ป๊อปอัปปิด
โดยค่าเริ่มต้น, ป๊อปอัปสามารถปิดได้โดยคลิกนอกกรอบป๊อปอัพหรือโดยการกดปุ่ม "Esc" ที่สำคัญ หากคุณไม่ต้องการที่ป๊อปอัพที่จะ closable โดยการคลิกที่นอกกรอบคุณสามารถเพิ่ม data-dismissible="false" แอตทริบิวต์ป๊อปอัพ (ไม่แนะนำจริงๆ) นอกจากนี้คุณยังสามารถเพิ่มปุ่มใกล้กับป๊อปอัพที่วางไว้ทั้งซ้ายหรือขวา จะทำอย่างไรให้เพิ่มปุ่มลิงก์กับ data-rel="back" แอตทริบิวต์ลงในภาชนะป๊อปอัพและตำแหน่งปุ่มโดยคลาส CSS
| ลักษณะ | ตัวอย่าง |
|---|---|
| ปุ่มปิดขวา | ลองมัน |
| ซ้ายปุ่มปิด | ลองมัน |
| ป๊อปอัพ Undismissible | ลองมัน |
การวางตำแหน่งป๊อปอัป
โดยค่าเริ่มต้นป๊อบอัพจะปรากฏโดยตรงผ่านองค์ประกอบคลิก เพื่อควบคุมตำแหน่งของป๊อปอัพให้ใช้ข้อมูลตำแหน่งที่จะเชื่อในการเชื่อมโยงที่จะใช้ในการเปิดป๊อปอัพ
มีสามวิธีการวางตำแหน่งของป๊อปอัพที่มี:
| ค่าแอตทริบิวต์ | ลักษณะ |
|---|---|
| data-position-to="window" | ป๊อปอัพจะปรากฏเป็นศูนย์กลางภายในหน้าต่าง |
| data-position-to="#myId" | ป๊อปอัพอยู่ในตำแหน่งมากกว่าองค์ประกอบที่มี #ID ระบุ |
| data-position-to="origin" | ค่าเริ่มต้น. ป๊อปอัพอยู่ในตำแหน่งโดยตรงผ่านองค์ประกอบคลิก |
ตัวอย่าง
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window" >Window</a>
<a href="#myPopup2" data-rel="popup"
class="ui-btn" data-position-to="#demo"> id="demo"</a>
<a href="#myPopup3"
data-rel="popup" class="ui-btn" data-position-to="origin" >Origin</a> ลองตัวเอง» การเปลี่ยน
โดยค่าเริ่มต้นป๊อบอัพไม่ได้มีผลกระทบการเปลี่ยนแปลงใด ๆ เพิ่มให้กับพวกเขา คุณสามารถใช้ใด ๆ ของผลกระทบที่เราแนะนำในการ "เปลี่ยน" บทที่ เพียงแค่ใช้ข้อมูลการเปลี่ยนแปลง = แอตทริบิวต์ "ค่า" เพื่อเชื่อมโยงที่เปิดป๊อปอัพ:
การสาธิตผลการเปลี่ยนแปลงที่มีอยู่ทั้งหมด
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> ลองตัวเอง» ลูกศรป๊อปอัพ
ในการเพิ่มลูกศรเพื่อชายแดนป๊อปอัพที่ใช้แอตทริบิวต์ข้อมูลลูกศรและระบุค่า "l" (left), "t" (top), "r" (right) หรือ "b" (bottom) :
ตัวอย่าง
<a href="#myPopup" data-rel="popup" class="ui-btn">Open
Popup</a>
<div data-role="popup" id="myPopup" class="ui-content"
data-arrow="l" >
<p>There
is an arrow on my LEFT border.</p>
</div> ลองตัวเอง» ป๊อปอัพโต้ตอบ
คุณสามารถเพิ่มมาร์กอัปโต้ตอบมาตรฐานเป็นป๊อปอัพ (หัวเนื้อหาและส่วนท้ายของมาร์กอัป):
ตัวอย่าง
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog
Popup</a>
<div data-role="popup" id="myPopupDialog">
<div
data-role="header"><h1>Header Text..</h1></div>
<div
data-role="main" class="ui-content"><p>Some text..</p><a href="#">some
links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div> ลองตัวเอง» ป๊อปอัพภาพถ่าย
นอกจากนี้คุณยังสามารถแสดงภาพในป๊อปอัพ:
ตัวอย่าง
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> ลองตัวเอง» หมายเหตุ: ป๊อปอัปไม่ได้เหมาะอย่างยิ่งเมื่อคุณมีทั้งชุดของภาพที่คุณต้องการแสดง (ชอบอัลบั้มกับ 500 ภาพเป็นพิเศษ) แต่สำหรับคู่ของภาพที่ต้องการจะดูมีขนาดใหญ่ - พวกเขามีความสมบูรณ์แบบ
ป๊อปอัพภาพซ้อนทับ
คุณสามารถควบคุมสีพื้นหลังที่อยู่เบื้องหลังป๊อปอัพ (หน้าตัวเอง) กับ data-overlay-theme แอตทริบิวต์
โดยค่าเริ่มต้นการซ้อนทับมีความโปร่งใส ใช้ data-overlay-theme="a" เพื่อเพิ่มการแสดงแสงและข้อมูลที่ซ้อนทับธีม = "B" เพื่อเพิ่มการซ้อนทับสีเข้ม:
ตัวอย่าง
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b" >
<p>I
have a dark background behind me.</p>
</div> ลองตัวเอง» ผลการซ้อนทับมักจะใช้ในภาพถ่ายป๊อปอัพ:
ตัวอย่าง
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup"
data-overlay-theme="b" >
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> ลองตัวเอง» หมายเหตุ: นอกจากนี้คุณยังจะได้เรียนรู้วิธีการใช้งานในรูปแบบป๊อบอัพและมุมมองรายการในบทต่อ