phonegap+jquerymobile 自定义弹窗

本文介绍了一种使用自定义dialog.js脚本来创建和管理HTML5对话框的方法。通过实例展示了如何设置对话框的过渡效果、绑定点击事件及回调函数,实现弹窗的显示与关闭。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原创:转载说明出处

编写dialog.js文件,贴以下代码

 var jqmdialog={
        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=\"pop\" 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();
            });

        }
 }

 

编写dialogTest.html页面

<div data-role="page"  id="home" >   
   此处省略
<input type=button id=btnT value=tttt><div>

<div id="ExistConfirm" data-role="page">
        <div data-role="header"  data-theme="b">
        <h2>操作提示</h2>
      </div>
        <div data-role="content" >
            <p>
              <span id="spanMessage" style="font-weight: bold">是否退出?</span>
            </p>
            <a id="btnOk" data-role="button" data-rel="back" data-theme="b">是</a> 
            <a id="btnNO" data-role="button" data-rel="back" data-theme="c">否</a>
        </div>
    </div>

编写页面js脚本

jqmdialog.openDialog({
    href: "#ExistConfirm",//地址
    dialog: "MessageDialog",//标识
    callback: function () {//回调函数
        $("#btnOk").unbind("click").bind("click", function () {
//btnOk必须是existConfirm中的按钮,定义回调
alert("click:btnOK");
                       $("#MessageDialog").dialog("close");
        });
        $("#btnNO").unbind("click").bind("click", function () {
alert("click:btnNO");

            $("#MessageDialog").dialog("close");
        });
    }
});

到这边就结束了。。。其他自己理解

转载于:https://www.cnblogs.com/zhoudemo/archive/2013/03/09/2951267.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值