jQuery Mobile 1.2 弹出框(Popups)预览(

jQuery Mobile 1.2 弹出框(Popups)预览(1) 

作者:eddy 日期:2012-07-21

字体大小:  小  中  大

 

在待发布的1.2版本中正如在官方博客中提到的增加了弹出框部件(Popups)，这个部件和对话框（Dialog）部件的不同之处就是在当前页面来创建一个真正的弹出层来展示不同形态的信息，而不是通过跳转到一个新的页面来模拟弹出窗口的效果。这样我们将会有更多的空间来设计我们的应用交互效果。
创建一个弹出窗口部件
这个部件的实现方式和Dialog部件有些类似，同样包含两个部分来实现：
第一部分：触发元素的data-rel定义(data-rel=’popup’)和href中定义弹出层的id（和Dialog不同的是href中这能定义当前页面中的一个div层，而dialog则需要定义一个URL或者是当前页面中的一个page）
第二部分：弹出层，和触发元素在同一个page的div元素，并且需要定义data-role=’popup’和id。
例子:

程序代码

<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool">
    <p>信息：这是一个Popup的例子，来源<a href=" http://www.uedcool.com/" target="_blank">www.uedcool.com</a><p>
</div>

实际上这个部件只是实现了一个带有圆角和阴影的空白div层，你可以根据需要在这个层里面来添加需要的结构或者部件。
例如：
带有样式风格的弹出框

程序代码

<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool" class="ui-content" data-theme="e" style="max-width:350px;">
  <p>信息这是一个带有theme定义和最大宽度定义的弹出框 <strong>来源UEDcool</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" class="ui-corner-all">
  <form>
    <div style="padding:10px 20px;">
      <h3>登录系统</h3>
      <label for="un" class="ui-hidden-accessible">帐号:</label>
      <input type="text" name="user" id="un" value="" placeholder="输入帐号" data-theme="a" />
      <label for="pw" class="ui-hidden-accessible">密码:</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;" class="ui-corner-all">
  <div data-role="header" data-theme="a" class="ui-corner-top">
    <h1>文件删除</h1>
  </div>
  <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
    <h3 class="ui-title">确定要删除这个文件吗？</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" class="ui-btn-right">Close</a><img class="popphoto" src=" http://www.uedcool.com/Plugins/aboutMe/Myface.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" class="ui-btn-right">Close</a>
这里显示内容 
</div>

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

程序代码

<div data-role="popup" id="popupPadded" class="ui-content">
  <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来使弹出框在该元素的位置显示。
(未完待续)

jQuery Mobile 1.2 弹出框(Popups)预览(1) 

作者:eddy 日期:2012-07-21

字体大小:  小  中  大

 

在待发布的1.2版本中正如在官方博客中提到的增加了弹出框部件(Popups)，这个部件和对话框（Dialog）部件的不同之处就是在当前页面来创建一个真正的弹出层来展示不同形态的信息，而不是通过跳转到一个新的页面来模拟弹出窗口的效果。这样我们将会有更多的空间来设计我们的应用交互效果。
创建一个弹出窗口部件
这个部件的实现方式和Dialog部件有些类似，同样包含两个部分来实现：
第一部分：触发元素的data-rel定义(data-rel=’popup’)和href中定义弹出层的id（和Dialog不同的是href中这能定义当前页面中的一个div层，而dialog则需要定义一个URL或者是当前页面中的一个page）
第二部分：弹出层，和触发元素在同一个page的div元素，并且需要定义data-role=’popup’和id。
例子:

程序代码

<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool">
    <p>信息：这是一个Popup的例子，来源<a href=" http://www.uedcool.com/" target="_blank">www.uedcool.com</a><p>
</div>

实际上这个部件只是实现了一个带有圆角和阴影的空白div层，你可以根据需要在这个层里面来添加需要的结构或者部件。
例如：
带有样式风格的弹出框

程序代码

<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool" class="ui-content" data-theme="e" style="max-width:350px;">
  <p>信息这是一个带有theme定义和最大宽度定义的弹出框 <strong>来源UEDcool</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" class="ui-corner-all">
  <form>
    <div style="padding:10px 20px;">
      <h3>登录系统</h3>
      <label for="un" class="ui-hidden-accessible">帐号:</label>
      <input type="text" name="user" id="un" value="" placeholder="输入帐号" data-theme="a" />
      <label for="pw" class="ui-hidden-accessible">密码:</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;" class="ui-corner-all">
  <div data-role="header" data-theme="a" class="ui-corner-top">
    <h1>文件删除</h1>
  </div>
  <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
    <h3 class="ui-title">确定要删除这个文件吗？</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" class="ui-btn-right">Close</a><img class="popphoto" src=" http://www.uedcool.com/Plugins/aboutMe/Myface.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" class="ui-btn-right">Close</a>
这里显示内容 
</div>

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

程序代码

<div data-role="popup" id="popupPadded" class="ui-content">
  <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来使弹出框在该元素的位置显示。
(未完待续)