JQuery Mobile對htm5的移動開發絕對是個好用的東西，今天簡單談談JQuery Mobile中的dialog的使用。

1.對話框的彈出。

2.對話框的生命周期。

3.對話框內事件的注冊。?

?

1）第一個問題：對話框的彈出。

??????? 如果要彈出一個對話框，可以在頁面中添加一個按鈕

??????? 再看看dialog.htm的內容，注意對話框是個單獨的頁面，jquery mobile將以Ajax方式加載到事件觸發的頁面，因此dialog.htm頁面不需要Header,content,footer之類的文檔結構，以下代碼就是全部dialog.htm的內容

<div?data-role="dialog"?id="aboutPage">
????<div?data-role="header"?data-theme="d">
????????<h1>
????????????Dialog</h1>
????</div>
????<div?data-role="content"?data-theme="c">
????????<h1>
????????????Delete?page?</h1>
????????<p>
????????????This?is?a?regular?page,?styled?as?a?dialog.?To?create?a?dialog,?just?link?to?a?normal
????????????page?and?include?a?transition?and?<code>data-rel="dialog"</code>?attribute.</p>
????????<a?href="#"?data-role="button"?data-rel="back"?data-theme="b"?id="soundgood">Sounds
????????????good</a>?<a?href="demo.htm"?data-role="button"?data-rel="back"?data-theme="c">Cancel</a>
????</div>
</div>

??????? 這樣當點擊Open Dialog之后就會彈出這個對話框了。彈出對話框的形式有多種，大家可以參考http://jquerymobile.com/。

?

2）第二個問題：對話框事件的生命周期。

?????? 當我們彈出一個對話框后，我們可能需要再它的不同的生命周期中去注冊不同的回調函數或事件，因此理解各個事件的順序是很有必要的。

$(document).bind("pagebeforeload",?function?(event,?data)?{
????????????alert('1.pagebeforeload!');
????????});
????????$('#aboutPage').live('pagebeforecreate',?function?(event)?{
????????????alert('2.This?page?was?just?inserted?into?the?dom!pagebeforecreate!!!');
????????})

????????$('#aboutPage').live('pagecreate',?function?(event)?{
????????????alert('3.pagecreate!');
????????????$("#soundgood").attr("demo.htm");
????????????$("#soundgood").click(function?()?{
????????????????alert("soundgood");
????????????});
????????});

????????$('#aboutPage').live('pageinit',?function?(event)?{
????????????alert('4.This?page?was?just?enhanced?by?jQuery?Mobile!pageinit!!!');
????????});
????????$(document).bind("pageload",?function?(event,?data)?{
????????????alert('5.pageload!');
????????});
????????$('#aboutPage').live('pageshow',?function?(event)?{
????????????alert('6.pageshow!');
????????});
????????$('#aboutPage').live('pageremove',?function?(event)?{
????????????alert('7.pageremove!');
????????});
????????$('#aboutPage').live('pagehide',?function?(event)?{
????????????alert('8.pagehide!');
????????});

??????? 看到上面代碼，相信大家一目了然了。對對話框事件的綁定用live或bind，解除綁定用die，或unbind。另外大家可以在事件pagecreate中看到對話框事件的注冊。切記，只有在對話框創建后注冊的事件才是有用的，也就是說如果你事先在Open dialog按鈕所在的頁面給dialog里面的元素注冊的事件是沒用的，因為dialog是后來以Ajax加載進去的。具體原理請參看官方文檔。

?

3）第三個問題：對話框事件的注冊。

??????? 上面我已稍微提及。為了避免打亂Open Dialog 所在頁面（就叫主頁面吧）的文檔結構。你可以有兩種做法，第一種將Open Dialog的樣式設為none，將其隱藏。

??????? 第二種做法是，添加一個javascript函數，來動態往Dom結構中添加這樣一個鏈接，這樣你可以隨時調用這個函數來打開一個對話框，注意回調函數的寫法

//options?has?properties:?href,transition
????//if?you?need?callback?method,?you?must?add?options.dialog?parameter
????openDialog:?function?(options)?{
????????var?href?=?options.href?||?"about:blank";
????????var?transition?=?options.transition?||?"none";
????????$('body').append("<a?id='tPushDialog'?href='"?+?options.href?+?"'?data-rel=\"dialog\"?data-transition=\""?+?options.transition?+?"\"?style='display:none;'>Open?dialog</a>?");
????????$("#tPushDialog").trigger('click');
????????$('body').find('#tPushDialog').remove();

????????$("#"?+?options.dialog).live('pageshow',?function?(event)?{
????????????if?(typeof?options.callback?==?'function')
????????????????options.callback();
????????});

????}

?

??????? 另外一個要注意的問題是有的人注冊的事件會響應多次，比如在第二個問題中給Sound Good注冊的事件會響應多次，你或許感到很奇怪。其實是因為你每次文檔加載的時候，你都給這個按鈕注冊了一個click事件，所以會彈出多次。正確的做法是，給dialog中的元素添加事件時，先unbind再bind。下面給大家一個例子。

<script?type="text/javascript">
????????function?show()?{
????????????Utils.openDialog({
????????????????href:?"MessageDialog.htm",
????????????????dialog:?"MessageDialog",
????????????????callback:?function?()?{
????????????????????$("#btnOk").unbind("click").bind("click",?function?()?{
????????????????????????alert("test");
????????????????????????$("#MessageDialog").dialog("close");
????????????????????});
????????????????}
????????????});
????????}
????</script>

??????? 再看看MessageDialog.htm的文檔結構

<div?data-role="dialog"?id="MessageDialog"?style="z-index:?999">
????<div?data-role="header"?data-theme="b">
????????<div?class="dialog_title1">
????????????Message?Received</div>
????????<input?type="hidden"?id="hiddenMessageId"?/>
????</div>
????<div?data-role="content"?data-theme="b">
????????<div?style="margin:?10px?5px?10px?5px;">
????????????<span?id="spanMessage"?style="font-weight:?bold"></span>
????????</div>
????????<div?id="messageContent">
????????????<ul?style="margin-left:?5px;">
????????????????<li>
????????????????????<input?type="button"?data-inline="true"?id="btnOk"?value="Yes"?data-rel="back"?/>
????????????????????<input?type="button"?data-inline="true"?id="Button1"?value="No"?data-rel="back"?/>
????????????????</li>
????????????</ul>
????????</div>
????</div>
</div>