jquery-dialog

http://laixl.com/wordpress/?p=182

 

上篇初步介绍了下jquerymobile的一些点滴，大家应该会喜欢上的，当然jquerymobile还处于a2版还有很多内容没有加进去，虫子也很多，但是瑕不掩瑜，让我们继续来了解下jquerymobile的其它华丽的功能。

在页面上除了可以建立page之外还可以建立dialog，跟app上的模式对话框一样，下面我们建立一个对话框

JavaScript

1
2
3
4

<div data-role="page">
    <div data-role="header"><h1>title</h1></div>
    <div data-role="content"><p>this is a dialog</p></div>
</div>

页面的过度：
在page和dialog间切换可是设定许多过度动画，可以在链接上设定data-transition属性，现在有以下一些过度

JavaScript

<div data-role="page">
 
  <div data-role="header">
    <h1>Page 1</h1>
  </div><!-- /header -->
 
  <div data-role="content">
    <a href="#dialog1" data-rel="dialog" data-transition="slide">slide</a><br />
    <a href="#dialog1" data-rel="dialog" data-transition="slideup">slideup</a><br />
    <a href="#dialog1" data-rel="dialog" data-transition="slidedown">slidedown</a><br />
    <a href="#dialog1" data-rel="dialog" data-transition="pop">pop</a><br />
    <a href="#dialog1" data-rel="dialog" data-transition="fade">fade</a><br />
    <a href="#dialog1" data-rel="dialog" data-transition="flip">flip</a><br />
  </div><!-- /content -->
 
  <div data-role="footer">
    <h4>Page Footer</h4>
  </div><!-- /header -->
 
</div><!-- /page -->
 
<div data-role="dialog" id="dialog1">
 
  <div data-role="header">
    <h1>Page Title</h1>
  </div><!-- /header -->
 
  <div data-role="content">
    <p>Page content goes here.</p>
  </div><!-- /content -->
 
</div>

data-transition默认是slide。你也可以用一个data-back=”true”的属性来添加一个后退的动作(使用中有点小问题)。

关闭dialog：

JavaScript

1

$('.ui-dialog').dialog('close');

另外，dialog并不会保存在浏览器的历史记录里，所以你点击后退按钮是不起作用的。

< 没有标签 >