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并不会保存在浏览器的历史记录里，所以你点击后退按钮是不起作用的。

< 没有标签 >