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>

        大家慢慢体会，：）