JQueryMobile在一个页面外调用对话框

最新推荐文章于 2020-05-27 11:55:43 发布

longgangbai

最新推荐文章于 2020-05-27 11:55:43 发布

阅读量172

点赞数

文章标签： jquerymoible dialog event

本文链接：https://blog.csdn.net/longgangbai/article/details/84220391

版权

jquerymobile打开dialog的主页面：

<!DOCTYPE HTML>
<html>
  <head>
    <title>页面外对话框的使用 页面外的对话框的生命周期</title>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<script src="jquery.mobile/jquery.js"></script>
	<script type="text/javascript" charset="utf-8" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
	<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
	<!--
	当我们弹出一个对话框后，我们可能需要再它的不同的生命周期中去注册不同的回调函数或事件，
	因此理解各个事件的顺序是很有必要的。
	dialog非同一个页面，点击dialog打开按钮的生命周期如下：
	1. pagebeforeload
	2. pagebeforecreate
	3. pagecreate
	4. pageinit
	5. pageload
	6.pageshow
	7.pageremove
	8.pagehide
	
	-->
	<script type="text/javascript" charset="utf-8">
	//页面外的对话框的生命周期如下
	$(document).bind("pagebeforeload", function (event, data) {
	        alert('1.页面加载之前事件(pagebeforeload)!');
	});
	$('#aboutPage').live('pagebeforecreate', function (event) {
	        alert('2.页面替换相关的都dom的事件(pagebeforecreate)!!!');
	})
	    
	$('#aboutPage').live('pagecreate', function (event) {
	        alert('3.页面开始创建(pagecreate)需要绑定相关的事件（主要指初始化对话框以及对话框中的信息）!');
	        
	        $("#dealPersonSetting").click(function () {
	            alert("对话框事件提交");
	        });
	        $("#closedialog").click(function(){
	            alert("对话框时间取消");
	        });
	});
	
	$('#aboutPage').live('pageinit', function (event) {
	        alert('4.页面初始化过程中....(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.页面对话框dom去掉 事件(pageremove)!');
	});
	$('#aboutPage').live('pagehide', function (event) {
	        alert('8.页面对话框隐藏时间pagehide!');
	});
   </script>  
  </head>
  <body >
<div  data-role="page" id="main" data-theme="b"   data-add-back-btn="true"  >   
		<div data-role="header"  data-position="fixed">  
		 <a   data-icon="arrow-l" data-rel="back" >返回</a>               
		 <h1>发布工单</h1>     
		 <a href="indexorder.html" data-ajax="false"  data-icon="home" data-iconpos="right" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>     
		</div><!-- /header -->  
			<!-- content -->
			<div data-role="content" class="content" data-theme="b"  >
					<form method="post" id="loginform">
					<!--   
					如果要弹出一个对话框，可以在页面中添加一个按钮
					 -->
                     <a href="./dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">打开对话框</a>
					</form>
			</div>
	</div>
  </body>
</html>

对话框页面如下：

<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- 
再看看dialog.htm的内容，注意对话框是个单独的页面，
jquery mobile将以Ajax方式加载到事件触发的页面，因此dialog.htm
页面不需要Header,content,footer之类的文档结构，
以下代码就是全部dialog.htm的内容

 -->
<div data-role="dialog" id="aboutPage">
						 <!-- header -->
			<div data-role="header" data-role="header" > 
				<h1>调查说明</h1>
			</div>
		   <!-- content -->
			<div data-role="content"  data-theme="b"  >
			<div data-role="fieldcontain">
	      <div  data-role="fieldcontain">
			 	<fieldset data-role="controlgroup" >
					<legend >你喜欢的水果:</legend>
					<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
					<label for="checkbox-1a">Cheetos</label>

					<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
					<label for="checkbox-2a">Doritos</label>
					
					<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
					<label for="checkbox-3a">Fritos</label>

					<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
					<label for="checkbox-4a">Sun Chips</label>
			    </fieldset>
			</div>
			</div>
			<div class="ui-body ui-body-b" align="center" data-role="fieldcontain">
							<fieldset class="ui-grid-a" data-type="horizontal" >
                                    <a id="dealPersonSetting"  
                                    	data-role="button" 
                                    	style="width: 40%;"  
                                    	data-inline="true" 
                                    	data-rel="back" 
                                    	href="#"
                                    	data-theme="b">提交</a>
									<a 
									   id="closedialog"
									    href="#"
										data-role="button"
										data-rel="back" 
										style="width: 40%;" 	
										data-inline="true">取消</a>
						    </fieldset>
			</div>
		</div>
	</div>