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

longgangbai

浏览: 7338027 次
性别:
来自: 上海

最近访客更多访客>>

liuqibo861129

sdcharles

paladin1988

ljq867

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQueryMobile学习总结

jquerymoible dialog event

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>

分享到：

【转】JQuerymobile 官方资源和插件 | JQueryMobile页面跳转参数的传递解决方案

2012-05-19 14:58
浏览 4021
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

phonegap contact API的使用

phonegap开发中必备的帮助文档android apk

jquerymobile 开发中几个样式问题

【转】PhoneGap域名白名单说明书（Domain Whitelist Guide）

phonegap拍照的获取图片和设置问题

Native+WebApp中Phonegap调用Android Activity

phonegap底层原理学习和研究(四)

phonegap底层原理学习和研究(三)

【转】手机应用开发者需注意的20个事项

【转】8 个移动产品设计必备网站

HTML5 canvas实现电子签名

HTML5 的GEOLocation的API

jquerymobile 一个简单的九宫格实现（Gallery）

jquerymobile google地图插件jquery-ui-map

【转】JQuerymobile 官方 资源和插件

JQueryMobile页面跳转参数的传递解决方案

jQuery Mobile学习笔记

【转】生活中的交互之小户型设计

【转】支付宝“技术风云会”：HTML5引发的移动开发变革

HTML 5+JavaScript混合应用比本地应用的开发成本低

最近访客更多访客>>

【转】JQuerymobile 官方资源和插件