3.1 Pages & dialogs

       h. Dialog
   Dialogs สามารถช่วยในการ presented ในหลายๆหน้าเว็บได้โดย เพิ่ม data-rel="dialog" เข้าไปที่ attribute ของ link

ตัวอย่าง

<a href="foo.html" data-rel="dialog">Open dialog</a>

   การ Transitions โดยปกติแล้ว Dialog จะเปิดใช้ร่วมกับการ transition แบบ ‘pop’ เหมือนกันทุกหน้า ซึ่งสามารถปรับเปลี่ยนหน้าอื่นๆที่ต้องการให้เปลี่ยนโดยใช้ Dialog โดยเพิ่ม data-transition ที่ attribute ของ link

ตัวอย่าง

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

Closing dialogs.
   สร้างปุ่ม cancle ไว้ใน dialogs และเพิ่ม data-rel=”back” ที่attribute ของ link สำหรับสร้างลิงค์ javascript คุณสามารถ set ค่า href ของ attribute เป็น “#” และใช้ attribute data-rel=”back” สามารถเรียกเมธอด close() ที่จะปิด dialogs

ตัวอย่าง

$('.ui-dialog').dialog('close')

Set การปิด button text
   สามารถเลือกกำหนด dialogs ทั้งหมดโดยผูกกับ mobileinit event และ set $.mobile.dialog.prototype.options.closeBtnText ที่เป็นคุณสมบัติแบบ string จากการเลือกใช้ของคุณหรือคุณสามารถใส่ค่า attribute data-close-btn-text กำหนดที่ text from ของคุณ
Chaning dialogs
    ถ้าจะเปิด Dialog อื่นๆจะปิดลิงค์ล่าสุดของ attribute data-rel=”back” แล้วจะนำไปยัง Dialog ก่อนหน้าจนกระทั่งถึงหน้าสุดท้ายของ Dialog ของ attribute data-role=”page”
styling และ theming
   Dialogs สามารถเป็น styled ที่ต่างจากธีมทำได้เหมือนกับหลายๆหน้าเพจโดยเพิ่ม data-theme ได้ที่ attribute ของ header,content, หรือ footer
   การนำเอา overlay มาใช้เพื่อการซ้อนทับหน้าเพจเพื่อให้ Dialog ลอยขึ้นอยู่หน้าสุดของหน้าเพจ การ overlay นี้มักจะใช้สีมาตรฐานคือใช้แบบ swatch “a” แต่ผู้ใช้สามารถที่จะปรับเปลี่ยน attribute data-overlay ในรูปแบบตามสีธีมที่ตนเองต้องการได้
   Dialogs ยังสามารถนำมาใช้กับรูปแบบการควบคุมการนำเสนอรูปแบบหลายๆปุ่มเพียงแ่ค่ลบ top margin ออกจากส่วนประกอบภายใน container ของ Dialogs ยกตัวอย่างถ้าหน้า Dialog ของคุณมี class ของ my-dialog,คุณควรที่จะเพิ่มตรง css ด้านบนของ dialog

 .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }

หรือคุณจะนำ style ที่เป็นของ dialog ทั้งหมดนั้นเข้าไว้ด้วยกับ

.ui-dialog .ui-dialog-contain { margin-top: 0 }

ความกว้างและกรอบของ Dialog
   โดยปกติแล้ว Dialog จะกว้าง 92.5% และ max-width เท่ากับ 500 pixels นอกจากนี้ยังให้กรอบด้านบนเป็น 10% เพื่อให้กรอบบน Dialog มีความใหญ่ให้เข้ากับความให้ของหน้าจอแต่การยุบลงของกรอบบน smartphone ที่มีขนาดเล็กทำให้ Dialog ภายใน container เลื่อนขึ้นด้านบน 15px เพื่อที่จะซ่อนcorner styling ถ้า Dialog เป็นการใช้ควบคุม sheet เพื่อแทนที่รูปแบบนี้ เพิ่มใน css ในรูปแบบของคุณและสามารถปรับแต่งได้ตามความต้องการ

.ui-dialog-contain {
	width: 92.5%;
	max-width: 500px;
	margin: 10% auto 15px auto;
	padding: 0;
	position: relative;
	top: -15px; }