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。下面给大家一个例子。

再看看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>

Jquery Mobile dialog的生命周期相关推荐

Android Dialog 弹窗的生命周期
Dialog的生命周期一共会经历以下6个方法: onCreate() : 视图初始化创建 show() :视图显示 onStart() : 视图启动 cancel() :视图取消 onDismiss( ...
Activity生命周期(Activity弹出Dialog会触发Activity生命周期吗)
Activity弹出Dialog对生命周期有什么影响_weixin_43976036的博客-CSDN博客_activity弹出dialog生命周期Activity弹出 Dialog 对生命周期有什么影 ...
5 道刁钻的 Activity 生命周期问题
1. A Activity 打开 B Activity 时都有哪些生命周期回调 1.1 standard 且无可复用实例 A.onPause -> B.onCreate -> B.onSt ...
Activity在有Dialog时按Home键的生命周期
当一个Activity弹出Dialog对话框时,程序的生命周期依然是onCreate() - onStart() - onResume(),在弹出Dialog的时候并没有onPause()和onSto ...
jQuery Mobile中对话框dialog的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中对话框dialog的data-*选项带有 data-role="dialo ...
jquery的ajax()方法与生命周期
getScript()和getJSON(): jquery封装AJAX的最顶层,用于特定情况下的使用. 有三个参数,与$.get()和$.post()方法,前三个参数相同.getScript()在需要 ...
jquery 监听td点击事件_VUE @hook浅析（监听子组件的生命周期钩子） - 古兰精
一.前言接触hook是从webhook开始接触的,webhook是git的一个扩展服务,可以在仓库接收到push/commit事件并发送http request至一个开发者可以自定义的URL.通过这 ...
dialog 弹框时activity生命周期调用过程
dialog 弹框时activity生命周期调用过程这个问题,分两部分在普通activity弹框dialog,activity的onPause方法会被调用吗? activity a中给dialog ...
透明主题activity和dialog对其他activity生命周期的影响
1 activity的生命周期简单说明首先上官网图片: //activity不同状态有不同的回调: public class ExampleActivity extends Activity {@O ...

Jquery Mobile dialog的生命周期

Jquery Mobile dialog的生命周期相关推荐

最新文章

热门文章