Jquery Mobile dialog的生命週期

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

1.對話框的彈出。

2.對話框的生命週期。

3.對話框內事件的註冊。

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

若是要彈出一個對話框，能夠在頁面中添加一個按鈕

<a href="dialog.htm" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>

再看看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，將其隱藏。

<a href="dialog.htm" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>

第二種作法是，添加一個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>

你們慢慢體會，：）

做者： Jackhuclan
出處： http://jackhuclan.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。