3.1 Pages & dialogs
i. Popup
การสร้าง popup จะเพิ่มส่วนที่เป็น attribute data-role=”popup” ใน div ของ content popup หากสร้าง link ด้วย href ก็สามารถ set ค่า ที่ id ของ div popup และ เพิ่ม attribute data-rel="popup" ที่จะเป็นเหมือนการสั่งการเรียกใช้ popup จาก framework ที่จะเปิด popup เมื่อมีการกด link
ตัวอย่างเช่น
<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
pop up ประกอบด้วย 2 องค์ประกอบหนึ่งในนั้นคือหน้าจอซึ่งเป็นองค์ประกอบเหมือนกรอบที่คลุมเนื้อหาทั้งหมดซึ่งจะเป็นในส่วนของ pop up เอง ถ้าองค์ประกอบแบบเดิมมี attribute เป็น id หน้าจอและพื้นที่ที่รองรับจะได้รับแต่ละ id บนนั้น
id ของหน้าจอควรเพิ่มด้วย “-screen” และ id ของพื้นที่รองรับควรเพิ่มด้วย “-popup” ดังต่อไปนี้
id="popupBasic-screen" และ id="popupBasic-popup" ตามลำดับ
การเรียกใช้งาน pop up plugin
plugin จะทำงานอัตโนมัติบนหน้าเว็บที่ div ที่มี attribute data-role=”popup” อย่างไรก็ตามถ้าต้องการเรียกใช้งาน plugin โดยตรงจากหลายๆ selector เช่นเดียวกับอีกหลายๆ plugin ของ Jquery และโปรแกรมที่ทำงานร่วมกับ popup options,methods,และevent ของ API
เช่น $( "#myPopupDiv" ).popup();
เปิด Popup(Opening popups)
เป็นการกำหนด markup เมื่อกด link ที่มี attribute data-rel=”popup” ที่ใช้ id ใน href link ที่ตรงกัน link ก็จะแสดง popup ขึ้นสามารถเรียกใช้ popup ด้วยเมธอด open
$( "#myPopupDiv" ).popup( "open" )
ปิด Popup(Closing popups)
popup สามารถปิดได้ด้วยการกด Esc หรือใช้เมธอด close
$( "#myPopupDiv" ).popup( "close" )
โดยทั่วไปปุ่ม link popup จะที attribute data-rel=”back” เพื่อทำให้เมื่อกดปิด popup แล้วจะกลับไปยังหน้าเพจเดิม นอกจากนี้เรายังสามารถกำหนดให้เครื่องหมายปิด popup ให้อยู่บน popup ทางซ้ายหรือทางขวาได้โดยเพิ่ม ui-btn-left (กำหนดมุมบนซ้าย) และ ui-btn-right (กำหนดมุมบนขวา) เรียกใช้ผ่าน class ใน link
ตัวอย่าง
<div data-role="popup">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
...popup contents go here...
</div>
เพิ่มพื้นที่ content popup (Adding padding)
สามารถเพิ่มได้โดยการเรียกผ่าน class=”ui-content” ของพื้นที่ popup ซึ่งจะเพิ่มจากมาตรฐาน 15px
ตัวอย่าง
<a href="#popupPadded" data-rel="popup" data-role="button">Popup with padding</a>
<div data-role="popup" id="popupPadded" class="ui-content">
<p>This is a popup with the ui-content
class added to the popup container.</p>
</div>
การเลือกจัดตำแหน่ง(Positioning option)
สามารถเพิ่ม attribute data-position-to=”#myElement” ใน link
ตัวอย่าง
<a href="#positionWindow" data-rel="popup" data-position-to="window">
<div data-role="popup" id="positionWindow">
<p>I am positioned to the window.</p>
</div>
ข้อจำกัดของการวางรูปแบบซึ้งทำให้ popup ไม่แสดงตรงตามความต้องการมีดังต่อไปนี้
- ความกว้างของ popup ควรจำกัดด้วย css max-width เพื่อลดความกว้างของ window 15px ทั้งสองข้าง
- ความกว้างจากขอบของ window (ด้านข้าง 2 ข้าง 15px ด้านบนและล่าง 30px) ทั้งนี้ควรปรับโดยสังเกต เมื่อ popup แสดงตามความเหมาะสมกับ window ความสูงของ popup สามารถปรับให้เกินขอบบนและขอบล่างของ window ได้ ซึ่ง popup สามารถใช้การเลื่อน scroll ดูเนื้อหาและสามารถกำหนดความกว้างได้
- ด้านบนของ popup ที่เท่ากันไม่ควรลบออกเพื่อให้แน่ใจว่าส่วนบนและล่างของ popup จะไม่ขาดหายไป
- ถ้าจัดให้องค์ประกอบของ popup อยู่ตรงกลางจะทำให้เกินความสูงของเนื้อหาทั้งหมด popup จะขยับสูงขึ้นไปจนความสูงกลายเป็นศูนย์
การ set ค่า transitions
สามารถ set ที่ attribute data-transition ที่ link ซึ่งสามารถกำหนดให้เป็นรูปแบบต่างๆ เช่น flip,popup,sliddown
ตัวอย่าง
<a href="#transitionExample" data-transition="flip" data-rel="popup">Flip transition</a>
ทั้งนี้การ transition จะ action ได้ดีขึ้นอยู่กับอุปกรณ์และบราวน์เซอร์ที่สามารถรองรับ 3D อาทิเช่น Android เวอชั่นมากกว่า Android 2x ขึ้นไป
Theming popup และ overlay
สามารถเพิ่ม attribute data-theme=”#mytheme” และ data-overlay-theme=”#mytheme” ใน div
ตัวอย่าง
<div id="both" data-role="popup" data-theme="e" data-overlay-theme="a" class="ui-content">
...Popup contents...
</div>
Note: กรณีการไม่ยอมรับการผูกเชื่อมของ popups
ปัจจุบัน framework ไม่ได้รองรับการผูกเชื่อมของ popup ดังนั้นจึงไม่สามารถฝัง link จาก popup หนึ่งไปยังอีก popup ได้
link ทั้งหมดประกอบด้วย data-rel=”popup” ภายใน popup ก็จะไม่ action ใดๆเลย
ทั้งหมดนี้หมายถึงการเลือกเมนูทำงานภายใต้ popup เพราะเหล่านี้ทำงานด้วยตัวเองโดยใช้ popup ถ้าหากเลือกเมนูวางใน popup มันจะแสดงผลแทนที่เมนูที่เลือกในกรณีที่ ระบุ data-native-menu=”false” วีธีแก้ปัญหาให้การผูกเชื่อม popup ทำงานคือการใช้การหยุดการทำงานชั่วคราว ยกตัวอย่างใน popupafterclose เหตุการที่ผูกกับ invoking popup ดังตัวอย่างต่อไปนี้ เมื่อปิด popup แรกใน popup ถัดไปจะค่อยๆเปิดขึ้นมาเรียกใช้เมธอด open
ตัวอย่าง
$( document ).on( "pageinit", function() {
$( '.popupParent' ).on({
popupafterclose: function() {
setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
}
});
});
กลับด้านบน