最新jQuery Mobile 1.2版本新特性(2)

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:10px 20px;">
        <h3>Please sign in</h3>
        <label for="un">Username:</label>
        <input type="text" name="user" id="un" placeholder="username" />
        <label for="pw">Password:</label>
        <input type="password" name="pass" id="pw" placeholder="password" />
        <button type="submit" data-theme="b">Sign in</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>Delete Page?</h1>
    </div>
    <div data-role="content" data-theme="d">
        <h3>Are you sure you want to delete this page?</h3>
        <p>This action cannot be undone.</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, Delete it</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">Close</a><img src="http://www.gbin1.com//gbin1/themes/gbin1_2column_page/images/logo.png" />
</div>

在线调试
 

List Views （可缩放列表）

这个效果肯定你也会需要：

<div data-role="collapsible" data-theme="b" data-content-theme="c">
    <h2>Favorite Spice Girl?</h2>
    <ul data-role="listview">
        <li><a href="index.html">Posh</a></li>
        <li><a href="index.html">Scary</a></li>
        <li><a href="index.html">Sporty</a></li>
        <li><a href="index.html">Baby</a></li>
        <li><a href="index.html">Ginger</a></li>
    </ul>
</div>

在线调试