添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 建站教程 > JavaScript教程 >

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

时间:2014-09-28      来源:qianduan.net     

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>

在线调试
 

jquery手机登录框案例
 

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>

在线调试
 

jQuery Mobile 1.2版本新特性-【科e互联】
 

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>

在线调试
 

jQuery Mobile手机菜单插件

相关文章

大家都在看

最新更新