CSMJU jQuery Mobile

เมนู
ถัดไป ก่อนหน้า

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 ไม่แสดงตรงตามความต้องการมีดังต่อไปนี้

การ 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 );
    	}
	});
});

 

© CSMJU