jQuery Mobile Popups探讨 - 第1页 - UI前端 - 洛枫学院 - powered by bbsmax

Query Mobile Popup弹窗集合。
带有样式风格的弹出框

<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool" data-theme="e" style="max-width:350px;">
<p>可自定义样式和最大宽度定义的弹出框 <strong>自定义弹窗</strong></p>
</div>

弹出菜单

代码复制 - 运行

<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="b">
<li data-role="divider" data-theme="a">弹出菜单</li>
<li><a href="#">文件</a></li>
<li><a href="#">选项</a></li>
<li><a href="#">退出</a></li>
</ul>
</div>

弹出表单

代码复制 - 运行

<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool" data-theme="a">
<form>
<div style="padding:10px 20px;">
<h3>登录系统</h3>
<label for="un">帐号:</label>
<input type="text" name="user" id="un" value="" placeholder="输入帐号" data-theme="a" />
<label for="pw">密码:</label>
<input type="password" name="pass" id="pw" value="" placeholder="输入密码" data-theme="a" />
<button type="submit" data-theme="b">登录</button>
</div>
</form>
</div>

弹出窗口

代码复制 - 运行

<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool" data-overlay-theme="a" data-theme="c" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>文件删除</h1>
</div>
<div data-role="content" data-theme="d">
<h3>确定要删除这个文件吗？</h3>
<p>该操作不可撤销。</p>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">删除</a> <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">取消</a> </div>
</div>

弹出图片

代码复制 - 运行

<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool" data-overlay-theme="a" data-corners="false">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext">Close</a>
<img src="http://4.ibin.sinaapp.com/public/img/bg.jpg" alt="Photo landscape"> 
</div>

调用方法：
这个部件在jQueryMobile中会自动初始化，但是你也可以通过popup()方法来调用。

代码复制 - 运行

$(‘#uedcool’).popup();

调用打开弹出框方法：
除了通过一个带有data-rel=’popup’的链接来触发部件显示，还可以调用open方法来打开弹出框部件，如：

代码复制 - 运行

$(‘#uedcool’).popup(‘open’);

关闭部件的方法：
弹出框可以通过按Esc键或者点击弹出框外面的区域来关闭，除此之外也可以通过调用close方法来关闭，如：

代码复制 - 运行

$(‘#uedcool’).popup(‘close’);

还可以通过在弹出框中添加关闭按钮的方式来调用关闭方法，只需要在关闭按钮或者链接中添加data-rel=’back’属性就可以通过点击来隐式调用关闭方法，例如：

代码复制 - 运行

<div data-role="popup">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext">Close</a>
这里显示内容
</div>

注：可以通过定义ui-btn-right或者ui-btn-left来控制按钮的显示位置。
部件容器内边距：
建议在弹出框的的div上添加ui-content样式，这样可以使这个容器内内部定义一个15px的内边距，使容器的布局更加自然，如下:

代码复制 - 运行

<div data-role="popup" id="popupPadded">
<p>在容器上添加<code>ui-content</code> 样式</p>
</div>

定位：
在默认情况下，弹出框的中心点是和触发元素的中心点重合的（除在对边界位置进行修正的情况下），这样可以很方便的来实现菜单或者提示功能。
除此之外，可以通过在触发的链接上定义data-position-to来实现类似对话框或者lightbox风格在页面上居中的显示效果，例如：
弹出框的中心点与页面的中心点对应：

代码复制 - 运行

<div data-role="popup" id="uedcool">
<p>I am positioned to the window.</p>
</div>
<a href="#uedcool" data-rel="popup" data-position-to="window" />

弹出框的中心点与触发元素的中心点对应：

代码复制 - 运行

<div data-role="popup" id="uedcool">
<p>I am positioned to the window.</p>
</div>
<a href="#uedcool" data-rel="popup" data-position-to="origin" />

除了以上window和origin这两个参数外，还可以在data-position-to属性中设置一个元素的id来使弹出框在该元素的位置显示。