对话框 data-rel=dialog

可以把任何指向页面的链接表现对对话框,给链接增加data-rel="dialog"的属性应用对话框。Jquery Mobile框架会给新页面增加圆角,页面周围增加 margin 以及深色的背景,使得对话框浮在页面之上。

<a href="dialog0.html" data-rel="dialog">Open dialog</a>

再看看dialog0.html的内容,注意对话框是个单独的页面,Jquery Mobile框架将以Ajax方式加载到事件触发的页面。以下代码就是全部dialog0.html的内容

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 415px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 415px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	</style>
</head> 
<body>
<div data-role="dialog">
	
		<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="example1.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>       
			<a href="example1.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
		</div>
	</div>
 
</body>
</html>

这样当点击Open Dialog之后就会弹出这个对话框了。效果如下图:


点击前效果


点击后效果

页面转场效果 data-transition

因为Jquery Mobile里对话框也是一个标准的"page",所以他会以默认的“slide”转场效果打开。而且像其他的页面一样,你也可以通过给链接添加data-transition的属性指定对话框的转场效果。为了让对话框看起来效果更好,我们推荐“pop”, “slidedown”,“flip”三种转场效果。取值范围: pop, flip, fade,turn, flow, slidefade, slide, slideup, slidedown, none。

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 415px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 415px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	</style>
</head> 
<body> 
<div data-role="page" style="max-height:420px; min-height:420px;">
	<div data-role="content" > 
			<a href="dialog1.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">data-transition="pop"</a>
			<a href="dialog1.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">data-transition="slidedown"</a>
			<a href="dialog1.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="flip">data-transition="flip"</a>
	</div>
</div>
</body>
</html>

效果:api.jquerymobile.com/resources/dialog/example2.html

关闭对话框

在对话框内,任何链接被点击,Jquery Mobile框架会自动关闭对话框并返回到请求的页面。

要在对话框内创建一个取消"按钮,只需要把该链接的herf指向打开该对话框的按钮然后给链接加上data-rel="back"属性。这样制作的后退链接在不支持js的设备上也同样管用。JavaScript生成的链接,你可以简单地设置的href属性值为“#”和使用data-rel="back"属性。你也可以调用对话框的close()方法以编程方式关闭对话框,例如:$( ".ui-dialog" ).dialog( "close" )。

改变“关闭”按钮的位置。data-close-btn取值:left、right、none

对话框默认在页眉的左边添加一个“关闭按钮”。你可以改变位置添加data-close-btn="right" 移动到右边。如果你不想在页眉显示“关闭按钮”,data-close-btn="none" 无按钮。

<div data-role="content"> 
	<a href="dialog6.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Right close button</a>
        <a href="dialog7.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">No close button</a>
</div>

dialog6.html页面代码如下:

<body>
<div data-role="page" data-close-btn="right">
	
		<div data-role="header">
			<h1>Dialog</h1>
		</div>
		<div data-role="content">
			<h1>Right close button</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="example6.html" data-role="button" data-rel="back" data-theme="b">Ok, I get it</a>       
		</div>
	</div>
 
</body>


点击前效果



设置关闭按钮文本

就像页面插件一样,你可以设置程序或属性两种方法设置对话框关闭按钮的文字。程序的设置可以通过更改mobileinit绑定的事件,然后设置 $.mobile.dialog.prototype.options.closeBtnText 设置一个字符串。或者给HTML标记代码增加 data-close-btn-text 属性来设置文字。

历史与后退按钮的行为
由于对话通常用于在一个页面的行为,该框架不包括对话框在hash历史跟踪。这意味着,对话将不会出现在你的浏览历史。例如,如果你是一个网页,点击链接,打开一个对话框,该对话框关闭,然后导航到另一个网页,如果你点击浏览器的后退按钮,在这一点上你将返回到第一页,而不是对话框。

链接对话框
如果一个对话框打开了另一个话框,那么点击最后被打开的对话框的data-rel="back" 按钮,会返回之前一个被打开的对话框,直到返回到data-role="page"容器。这保证了对话框之间的导航关系。

样式和主题

通过给对话框添加data-theme 属性,可以给对话框定义不同的主题。对话框是浮在一个蒙版层上的。蒙版层的主题样式默认为a主题,但是通过给页面容器添加 data-overlay-theme属性可以设置单独蒙版层的主题。

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 415px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 415px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	</style>
</head> 
<body> 
<div data-role="page" style="max-height:420px; min-height:420px;">
	<div data-role="content" > 
		<a href="dialog2.html" data-role="button" data-inline="true" data-rel="dialog" ata-transition="pop">An alternate color scheme</a>
	</div>
</div>
</body>
</html>

dialog2.html页面的源代码如下:

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 415px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 415px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	</style>
</head> 
<body>
<div data-role="page">
		<div data-role="header" data-theme="e">
			<h1>Dialog</h1>
		</div>
		<div data-role="content" data-theme="e">
			<h1>I'm colorful</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="example3.html" data-role="button" data-rel="back" data-theme="a">Good for you</a>       
			<a href="example3.html" data-role="button" data-rel="back" data-theme="c">Don't care, really</a>    
		</div>
	</div>
</body>
</html>


点击前效果

取消圆角 data-corners="false"

对话框默认下,是存在圆角的。若要取消圆角,添加 data-corners="false" 属性。

<div data-role="content"> 
   <a href="dialog8.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">No rounded corners</a>
</div>

dialog8.html页面的代码如下:

<body>
<div data-role="page" data-corners="false">
	
		<div data-role="header">
			<h1>Dialog</h1>
		</div>
		<div data-role="content">
			<h1>No rounded corners</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="example6.html" data-role="button" data-rel="back" data-theme="b">Ok, I get it</a>       
		</div>
</div> 
</body>


点击前效果

被覆盖层样式主题设置 data-overlay-theme

对话框出现浮动覆盖层以上。被覆盖层默认的样本主题颜色”a“黑色样式,可以通过 data-overlay-theme 属性来设置。

	<div data-role="page" data-overlay-theme="e">
		<div data-role="header" data-theme="b">
			<h1>Dialog</h1>
		</div>
		<div data-role="content" data-theme="d">
			<h1>Custom overlay</h1>
			<p>This dialog adds <code>data-overlay-theme="e"</code> to the page container to set the overlay swatch color.</p>
			<a href="example4.html" data-role="button" data-rel="back" data-theme="a" data-inline="true">I like it</a>       
		</div>
		
	</div>

对话框控制列表

对话框也可以用更像一个控制表,如果你简单地移除顶部边缘从对话框的容器内的元素提供多个按钮。例如,如果你的对话页有一个自定义类 my-dialog ,你可以在对话框顶部添加CSS .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }。或者你可以将这个样式应用到所有的对话:.ui-dialog .ui-dialog-contain { margin-top: 0 }

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 415px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 415px;
	}
	.ui-dialog.dialog-actionsheet .ui-dialog-contain {
	margin-top: 0;
	}
	</style>
</head> 
<body>
<div data-role="page" class="dialog-actionsheet">
	
	<div data-role="content" data-theme="a">
		<h3>Share Photos</h3>
		<a href="dialog5.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Email</a>     
		<a href="dialog5.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Upload to flickr</a>       
		<a href="dialog5.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Share on Facebook</a>      
		<a href="dialog5.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Tweet photo</a>       
		 		  
		<a href="example5.html" data-role="button" data-rel="back" data-theme="a">Cancel</a>    
	</div>
</div>
</body>
</html>

对话框宽度和外边距

为了可读性,对话有一个默认的 width:92.5% 和 max-width:500 px。还有距离屏幕的上面 margin-top:10%。但是在智能手机上是一个小幅度。对话框 top 有15px的隐藏角落造型。如果对话框作为控制表(见上文)。重写这些样式,添加下面的CSS样式表和重写规则调整的需要:

.ui-dialog-contain {
width: 92.5%;
max-width: 500px;
margin: 10% auto 15px auto;
padding: 0;
position: relative;
top: -15px;
}