jQuery Mobile(Popup)
来源：互联网 发布：知乎 恋人之间矛盾 编辑：程序博客网 时间：2024/04/20 11:56
Popups （弹出层）
弹出层是一个覆盖于页面其它内容的小的区域。可以用来设计提示栏，显示照片，地图或者其它内容。在jQuery mobile1.2中，实现了这个超棒的widgets。
在本篇文章中，我们将使用如下代码框架来演示代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery Mobile1.2</title>
<link rel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<scriptsrc="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<scriptsrc="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="content">
<!-- 请将以下的文章代码粘贴到此处 -->
</div>
</body>
</html>
这里我们使用CDN来加载javascript。
友情提示：请大家使用Chrome来访问以下的“在线调试”地址，谢谢！
为了添加popup弹出层，我们需要添加如下属性来定义所参考类型是popup：
data-rel="popup"
然后定义具体的插件类型，如下：
data-role="popup"
展示的触发层内容，可以是表单，菜单或者图片，完整代码如下：
<a href="#simplepopup"data-rel="popup">OpenPopup</a>
<div data-role="popup"id="simplepopup">
<p>This is a completely basic popup,no options set.<p>
</div>
在线调试
Tooltips（工具提示条）
使用popup我们还可以创建工具提示条，如下：
<a href="#tooltip" data-rel="popup"data-role="button">Find outmore</a>
<div data-role="popup" id="tooltip"data-theme="e">
<p>You found outmore!.</p>
</div>
在线调试
Menus（菜单）
下面我们生成一个菜单，如下：
<a href="#menu" data-rel="popup"data-role="button">Menu</a>
<div data-role="popup" id="menu"data-theme="a">
<ul data-role="listview" data-theme="c"data-inset="true">
<li data-role="divider"data-theme="a">MyMenu</li>
<li>Unlinked</li>
<li><ahref="methods.html">Linked</a></li>
<li><ahref="methods.html">Withcount</a><spanclass="ui-li-count">42</span></a></li>
</ul>
</div>
在线调试
当然，你也可以生成可缩放list，如下：
<a href="#nestedmenu" data-rel="popup"data-role="button">NestedMenu</a>
<div data-role="popup" id="nestedmenu"data-theme="none">
<div data-role="collapsible-set" data-theme="b"data-content-theme="c" data-collapsed-icon="arrow-r"data-expanded-icon="arrow-d" style="margin:0;width:250px;">
<div data-role="collapsible"data-inset="false">
<h2>Colors</h2>
<ul data-role="listview">
<li><ahref="#">Red</a></li>
<li><ahref="#">Blue</a></li>
</ul>
</div>
<div data-role="collapsible"data-inset="false">
<h2>Shapes</h2>
<ul data-role="listview">
<li><ahref="#">Circle</a></li>
<li><ahref="#">Square</a></li>
</ul>
</div>
</div>
</div>
在线调试
Form（表单）
我们也可以生成弹出式样的登录表单，如下：
<a href="#login" data-rel="popup"data-position-to="window"data-role="button">Login</a>
<div data-role="popup" id="login"data-theme="a">
<form style="padding:10px20px;">
<h3>Please signin</h3>
<label for="un"class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="un"placeholder="username" />
<label for="pw"class="ui-hidden-accessible">Password:</label>
<input type="password" name="pass" id="pw"placeholder="password" />
<button type="submit"data-theme="b">Signin</button>
</form>
</div>
在线调试
Dialogs（对话框）
对话框也是我们常用的，如下：
<a href="#dialog" data-rel="popup"data-position-to="window" data-role="button"data-transition="pop">Dialog</a>
<div data-role="popup" id="dialog"data-overlay-theme="a" data-theme="c">
<div data-role="header"data-theme="a">
<h1>DeletePage?</h1>
</div>
<div data-role="content"data-theme="d">
<h3>Are you sure you want to deletethis page?</h3>
<p>This action cannot beundone.</p>
<a href="#" data-role="button" data-inline="true"data-rel="back"data-theme="c">No</a>
<a href="#" data-role="button" data-inline="true"data-rel="back" data-theme="b">Yes, Deleteit</a>
</div>
</div>
在线调试
Photos（图片展示）
使用悬浮方式展示图片，如下：
<a href="#photo" data-rel="popup"data-position-to="window" data-role="button"data-transition="fade">Photo</a>
<div data-role="popup" id="photo"data-overlay-theme="a" data-theme="d"data-corners="false">
<a href="#" data-rel="back" data-role="button"data-theme="a" data-icon="delete" data-iconpos="nojs"class="ui-btn-right">Close</a><imgsrc=http://www.2cto.com/uploadfile/2012/1121/20121121040056376.png"/>
</div>
在线调试
List Views （可缩放列表）
这个效果肯定你也会需要：
<div data-role="collapsible" data-theme="b"data-content-theme="c">
<h2>Favorite SpiceGirl?</h2>
<ul data-role="listview">
<li><ahref="index.html">Posh</a></li>
<li><ahref="index.html">Scary</a></li>
<li><ahref="index.html">Sporty</a></li>
<li><ahref="index.html">Baby</a></li>
<li><ahref="index.html">Ginger</a></li>
</ul>
</div>
在线调试
功能加强
其它的更新包括了一些功能上的加强。
jQuery支持更新
开始支持jQuery1.8。sizzle.js的重写带来了性能的提升及其其它。并且开始考虑放弃支持1.6，如果你使用旧版本的话，可能会不舒服。
列表视图的自动分隔
data-
原来：
现在：
- jQuery Mobile(Popup)
- jquery mobile Popup
- jquery mobile 弹出对话框 popup
- JQuery Mobile Popup窗口定位
- Jquery Mobile Popup控件 使用注意
- jquery mobile alter、confirm重写，使用popup
- jquery mobile alter、confirm重写，使用popup
- jquery mobile的popup不弹出问题。
- jQuery mobile popup函数回调fangfa
- 关于使用jquery mobile popup弹框阴影问题
- jquery mobile popup的afterclose事件不触发的问题
- Jquery mobile 中用popup弹出对话框的实现
- jQuery Mobile中弹窗popup的data-*选项
- jQuery Mobile设计思想
- jquery mobile 切换页面
- jQuery Mobile 手动显示…
- jQuery Mobile基础09----jQuery Mobile Widgets(2)-popup（泡泡窗口
- jQuery Mobile系列之Accordion
- android:inputType值及说明
- Android反编译与防止反编译
- Android 获取状态栏高度
- java环境变量配置
- Android将发送的短信插入数据库
- jQuery Mobile(Popup)
- Only the original&nbsp…
- JQuery获取form表单值
- [Android]添加admob后，使用ProGua…
- WampServer简单配置
- android listview addHe…
- PHP-ExcelReader个人总结
- android引入第三方jar包时报错java…
- PHP实现异步调用方法
