jQuery mobile dialog 详情

来源：互联网发布：软件开发需要学习什么编辑：程序博客网时间：2024/04/29 17:47
//连接的方式打开对话框 这个比较简单<a href="dialog.html" class="ui-btn mybtn" data-transition="pop">连接打开对话框</a>//js的方式打开对话框 这个也不是很复杂 <a href="#" class="ui-btn mybtn opendialogByjs" data-transition="pop">JS打开对话</a>//绑定函数  页面 pageshow的时候 $( "#dialogPage" ).on( "pagecreate", function( event ) {    }).on("pageshow",function(){         var page = $(this);         //这里一定要记得unbind("click") 要不然一个页面可能会绑定多次          page.find(".opendialogByjs").unbind("click").on("click",function(){         //加一个隐藏的a标签  a标签的href指向dialog.html          $('#dialogPage').append("<a id='tPushDialog' href='dialog.html' data-rel=\"dialog\"   style='display:none;'>Open dialog</a> ");         // 触发a标签的click事件         $("#tPushDialog").trigger('click');      });});



dialog.html--->
<div data-role="page" data-dialog="true" id="dialogpage">   <div data-role="header" data-theme="b">   <h1>Dialog</h1>   </div>   <div role="main" class="ui-content">   <h1>标题</h1>   <p>弹出页内容<code>data-rel="dialog"</code> attribute.</p>      <a href="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">确定</a>      <a href="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">取消</a>   </div></div>//对话框可以动态关闭的  这是官方提供的方法  其实看源码就知道它的功能只是退回 也就是返回上一页$("#dialogpage").dialog("close");//dialog的声明周期与其他页面的生命周期一样pagebeforeload-pagebeforecreate-pagecreate-pageinit等 不再列举
1 0