标签：
<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" charset="utf-8">
<link rel="stylesheet" href="http://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css" />
<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>对话框高级属性</h1>
</div>
<div data-role="content">
<a href="#popupCloseRight" data-rel="popup" data-role="button" data-transition="pop">右侧叉关闭</a>
<a href="#popupCloseLeft" data-rel="popup" data-role="button">左侧叉关闭</a>
<a href="#popupUndismissible" data-rel="popup" data-role="button">禁用空白关闭</a>
<a href="#popupCloseLeft1" data-rel="popup" data-role="button">左侧叉关闭2</a>
<div data-role="popup" id="popupCloseRight" class="ui-content" style="max-width: 280px" >
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<p>点击右侧叉关闭对话框</p>
</div>
<div data-role="popup" id="popupCloseLeft" class="ui-content" style="max-width: 280px">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
<p>点击左侧叉关闭对话框</p>
</div>
<div data-role="popup" id="popupUndismissible" class="ui-content" style="max-width: 280px" data-dismissible="false">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
<p>点击屏幕空白区域无法关闭</p>
</div>
<div data-role="popup" id="popupCloseLeft1" class="ui-content" style="max-width: 280px">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>空白标题</h1>
</div>
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
<p>点击左侧叉关闭对话框</p>
</div>
</div>
<div data-role="content">
<a href="#popupImg1" data-rel="popup" data-position-to="window">
<img src="img_pic.png" style="width: 49%">
</a>
<a href="#popupImg2" data-rel="popup" data-position-to="window">
<img src="img_camara.png" style="width: 49%">
</a>
<div data-role="popup" id="popupImg1">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="img_camara.png" style="max-height: 512px" alt="Sydney,Australia">
</div>
<div data-role="popup" id="popupImg2">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="img_pic.png" style="max-height: 512px" alt="NewYork,USA">
</div>
</div>
</div>
</body>
</html>
讲解：
data-* 属性
jQuery Mobile 使用 HTML5 data-* 属性为移动设备创建“对触摸友好的”美观的外观。
data-rel="popup" data-role="button" 配合使用，表示当前标签外观是一个button，并且点击后会关联一个popup
带有 data-rel="popup" 属性的容器，还可以配置如下属性
| Data 属性 | 值 | 描述 |
|---|---|---|
| data-position-to | origin | jQuery selector | window | 规定弹出框的位置。 Origin - 默认。弹出框位于打开它的链接上。 jQuery selector - 弹出框位于指定元素上。 Window - 弹出框位于窗口屏幕中央。 |
| data-rel | popup | 用于打开的弹出框。 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 规定如何从一页过渡到下一页。参加 jQuery Mobile 过渡。 |
一、对话框关闭按钮设置：
data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right"
data-rel="back" 设置点击效果就是后退一步(即关闭)，data-icon="delete"
设置按钮上的图标， data-iconpos="notext" 设置按钮不显示任何文字，如果
这个地方设置为top,left,right,bottom四个之一的话，那么按钮就会带有文字，这个文字就是 <a>写在这里的文字</a>
class="ui-btn-right" 类别设置了这个按钮显示的位置
二、对话框标题设置：
<div
data-role="header" data-theme="a" class="ui-corner-top">
指定类型header，指定类型ui-corner-top
三、对话框弹出位置
<a href="#popupImg1" data-rel="popup"
data-position-to="window">
| Data 属性 | 值 | 描述 |
|---|---|---|
| data-ajax | true | false | 规定是否通过 AJAX 来加载页面，以改进用户体验和过渡。如果设置为 false，则 jQuery Mobile 将进行普通的页面请求。 |
| data-direction | reverse | 反转过渡动画（仅用于页面或对话） |
| data-dom-cache | true | false | 规定是否清除个别页面的 jQuery DOM 缓存（如果设置为 true，则您需要注意对 DOM 的管理，并全面测试所有移动设备）。 |
| data-prefetch | true | false | 规定是否把页面预取到 DOM 中，以使其在用户访问时可用。 |
| data-rel | back | dialog | external | popup | 规定有关链接如何行为的选项。 Back - 在历史记录中向后移动一步。 Dialog - 将页面作为对话来打开，不在历史中记录。 External - 链接到另一域。 opens - 打开弹出窗口。 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 规定如何从一页过渡到下一页。参加 jQuery Mobile 过渡。 |
| data-position-to | origin | jQuery selector | window | 规定弹出框的位置。 Origin - 默认。在打开它的链接上弹出。 jQuery selector - 在指定元素上弹出。 Window - 在窗口屏幕中间弹出。 |
alt="Sydney,Australia"
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息
标签：
原文地址：http://blog.csdn.net/lskshz/article/details/51329876
