最新jQuery Mobile 1.2版本新特性

标签： Javascript jquery jquery mobile | 发表时间：2012-11-21 18:27 | 作者：terry
出处：http://www.qianduan.net

 

最新jQuery Mobile 1.2版本新特性

大家还记得在jQuery 1.0 RC版本发布的时候我们曾经发布过一个 jQuery Mobile RC版本介绍文章介绍主要的特性。就在前不久，jQuery Mobile团队又发布了jQuery Mobile 1.2。新版本中带来了一些非常不错的特性。在今天的这篇文章中我们将继续介绍1.2版本的一些新的widget，及其一些针对老版本widget的功能加强。希望大家喜欢！

Widgets

jQuery Mobile最核心的地方就在于widgets。提供了与用户交互的界面。在最新的版本中，加入了一个全新的widget：popup modal。

Popups （弹出层）

弹出层是一个覆盖于页面其它内容的小的区域。可以用来设计提示栏，显示照片，地图或者其它内容。在jQuery mobile 1.2中，实现了这个超棒的widgets。

在本篇文章中，我们将使用如下代码框架来演示代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile 1.2</title>
    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div data-role="content">
        <!-- 请将以下的文章代码粘贴到此处 -->
    </div>
</body>
</html>

这里我们使用CDN来加载javascript。

友情提示：请大家使用Chrome来访问以下的“在线调试”地址，谢谢！

为了添加popup弹出层，我们需要添加如下属性来定义所参考类型是popup：

1

data-rel="popup"

然后定义具体的插件类型，如下：

1

data-role="popup"

展示的触发层内容，可以是表单，菜单或者图片，完整代码如下：

1
2
3
4

<a href="#simplepopup" data-rel="popup">Open Popup</a>
<div data-role="popup" id="simplepopup">
    <p>This is a completely basic popup, no options set.<p>
</div>

在线调试

popup

Tooltips（工具提示条）

使用popup我们还可以创建工具提示条，如下：

1
2
3
4

<a href="#tooltip" data-rel="popup" data-role="button">Find out more</a>
<div data-role="popup" id="tooltip" data-theme="e">
    <p>You found out more!.</p>
</div>

在线调试

Menus（菜单）

下面我们生成一个菜单，如下：

1
2
3
4
5
6
7
8
9

<a href="#menu" data-rel="popup" data-role="button">Menu</a>
<div data-role="popup" id="menu" data-theme="a">
    <ul data-role="listview" data-theme="c" data-inset="true">
        <li data-role="divider" data-theme="a">My Menu</li>
        <li>Unlinked</li>
        <li><a href="methods.html">Linked</a></li>
        <li><a href="methods.html">With count</a><span>42</span></a></li>
    </ul>
</div>

在线调试

menu

当然，你也可以生成可缩放list，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<a href="#nestedmenu" data-rel="popup" data-role="button">Nested Menu</a>
<div data-role="popup" id="nestedmenu" data-theme="none">
    <div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
        <div data-role="collapsible" data-inset="false">
            <h2>Colors</h2>
            <ul data-role="listview">
                <li><a href="#">Red</a></li>
                <li><a href="#">Blue</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-inset="false">
            <h2>Shapes</h2>
            <ul data-role="listview">
                <li><a href="#">Circle</a></li>
                <li><a href="#">Square</a></li>
            </ul>
        </div>
    </div>
</div>

在线调试

collapsible menu

Form（表单）

我们也可以生成弹出式样的登录表单，如下：

1
2
3
4
5
6
7
8
9
10
11

<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>

在线调试

form

Dialogs（对话框）

对话框也是我们常用的，如下：

1
2
3
4
5
6
7
8
9
10
11
12

<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>

在线调试

dialog

Photos（图片展示）

使用悬浮方式展示图片，如下：

1
2
3
4

<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>

在线调试

photo

List Views （可缩放列表）

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

1
2
3
4
5
6
7
8
9
10

<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>

在线调试

Collapsible

功能加强

其它的更新包括了一些功能上的加强。

jQuery支持更新

开始支持jQuery1.8。sizzle.js的重写带来了性能的提升及其其它。并且开始考虑放弃支持1.6，如果你使用旧版本的话，可能会不舒服。

列表视图的自动分隔

原来：

List View Autodividers

现在：

List View Autodividers

注意这里不包括管理排序，分组和过滤。如果你需要类似功能，考虑这个插件： jQuery Mobile Tinysort plugin.

只读列表

提供了只读列表，但是对于能不能点击不是很明显。

提供了更好的表单元素宽度调整

jQuery mobile version1.2解决了表单元素的问题，有时候不能完全的占有父元素宽度

其它的设备的支持

添加了另外一些平台：iOS6；Android1.4(Jellybean)，Tizen，firefox for Android和Kindle Fire HD。

完整的更新列表

你可以在官方博客来查看完整的更新，希望我们的介绍能够给你带来一部分的新版本体验，如果你有任何问题，请给我们留言！via  tutsplus

来源： 最新jQuery Mobile 1.2版本新特性

相关 [jquery mobile 版本] 推荐：

最新jQuery Mobile 1.2版本新特性

- - 前端观察
大家还记得在jQuery 1.0 RC版本发布的时候我们曾经发布过一个 jQuery Mobile RC版本介绍文章介绍主要的特性. 就在前不久，jQuery Mobile团队又发布了jQuery Mobile 1.2. 新版本中带来了一些非常不错的特性. 在今天的这篇文章中我们将继续介绍1.2版本的一些新的widget，及其一些针对老版本widget的功能加强.

jQuery Mobile 1.3.0发布

- - InfoQ cn
jQuery基金会发布了旗下的JavaScript和HTML5/CSS框架 jQuery Mobile 1.3.0. 更新主要集中在响应式的web设计并新增了多个移动应用的widget. 响应式web设计(RWD)旨在提供最佳的用户浏览体验，不管使用的是什么设备、什么浏览器. RWD使用CSS媒体查询(media queries)语言在浏览器中动态适配页面布局，而不是在服务端检测用户代理（User Agent）.

关注：jQuery Mobile来了！

- sheng - 膘叔
　　为了让移动设备也能用上jQuery，jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project（http://jquerymobile.com）. jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架.

easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

- - 博客园_首页
jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile；那么jquery mobile到底包括些什么呢. 页面Header是一个data-role为header的div，当然我们可以在这个div里定义其他任何内容，比如常用的后退按钮等；. 一般在header里添加的button不要太多，添加在header里的按钮带有自动定位功能；.

jQuery Mobile开发HTML5移动应用

- - HTML5研究小组
随着移动互联世界的到来，目前已发展到多种移动 操作系统割据的局面，而开发者则急需要能运用原有的开发知识和技能，快速方便地构建移动应用程序，并期望能运行在不同的 手机操作平台上，比如Android,iOS,黑莓等. 而目前，出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架，其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com)，它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用，而且直接通过 手机的浏览器即可浏览.

10款不错的 jQuery Mobile 插件推荐

- caoxg - ITeye资讯频道
jQuery 是一个非常流行的JavaScript库，你可以在web项目中使用这个库，通过短短的几行代码就可以创建漂亮的效果. 下面列出了10款非常不错的jQuery 移动插件，可以让开发人员在移动开发中更加便捷和得心应手.                                                                .

微软把Metro主题引入到了jQuery Mobile和 Windows Phone

- - Web App Trend
获得微软开放公司的许可后网站和移动app就可以使用Metro样. 微软开放技术公司已经使Metro样式主题可以在开源移动UI框架jQuery Mobile上使用，这样，Windows Phone 7.5 操作系统上的应用就可以采用Metro界面风格. Metro本来是为Windows 8 操作系统而设计的平板电脑界面风格，但它同时也可用于Windows Phone.

2小时学会jquery mobile开发移动网站

- - 鲁塔弗的博客
jQuery Mobile: http://jquerymobile.com,一个基于jquery的html 5移动网站框架，用它做出来的网站界面和App风格类似. 方案选型过程见 http://lutaf.com/145.htm. 优点1：开发特别简单，不需要美术资源，甚至不需要太多css/html编程经验，甚至不需要js编程技能，普通程序员就能很快学会制作出 美观大方的 mobile site.

jquery mobile搭配REST是不错的选择

- - ITeye博客
现在，jquery mobile由于可以使用HTML5去 编写移动网页，因此如果是普通的网站，. 想搞个移动版本之类的话，可以尝试用jquery mobile,比如有些功能，需要返回给. 移动端的话，可以使用后端REST的风格，以JSON形式返回给前端，然后jquery mobile. 有利用ajax发起向后端拿到REST返回的结果，在前端解析，效果是不错的.

Weaver Mobile招聘

- HACK21 - 弯曲评论
Weaver Mobile是一家专注于下一代SNS的移动互联网公司. 成立于2011年4月，并获得了业界著名的风险基金的投资和支持. 我们将会在六月开始在北京上地建立研发中心. 诚恳的邀请在Android，iPhone应用系统开发有兴趣，or／and 有经验的朋友加盟. 我们期望您，具备良好的数据结构的基础，具备良好的和至少C语言功底.