`

jQuery Mobile 1.1 : 更流畅,更快捷,更实用

阅读更多

日期:2012-4-18  来源:GBin1.com

jQuery Mobile 1.1 : 更流畅,更快捷,更实用

最新版本的jQuery Mobile 1.1本月13号刚刚发布 ,带给我们了最新的强大特和代码提升。在这篇文章中,我们将要快速的介绍jQuery mobile的新特性及其移动开发人员需要了解的所有内容。准备好和我们一起体验jQuery mobile吧!

在这个文章中,我们将要介绍如下内容:

  • 改良的固定header和footer
  • 提高的页面过渡效果,和俩个新开发的过渡效果 
  • 加载“spinner”和文本提升
  • 漂亮的迷你表单元素
  • 更漂亮的翻转开关切换
  • 更好的滑动选择
  • 禁止为整个页面标签优化和AJAX处理
  • 其它相关的提升和修改

在本篇文章结尾,你会看到一些jQuery Mobile 1.2的新特性和组件。

首先我们开始介绍jQuery mobile的标题特性,大大的提升了header和footer工具条。

Toolbar的巨大改良

固定的toolbar是用来固定页面顶端和低端的工具条,通过添加data-position="fixed"来添加到页头和页尾。

最简单的方式去创建一个固定的页面元素是使用CSS position:fixed 。因为移动浏览器对于这个属性的支持不是很完整,所以在老版本中通过动态的重新定位来实现功能。虽然可以工作,但是不是非常完美。

很 幸运的是,浏览器的支持在最近已经被大大的增强了。使用version1.1,jQuery mobile团队已经完整的重新设计了toolbar,开始使用position:fixed。这样使得toolbar更加的流畅。对于不支持 position:fixed的浏览器,例如,Safari in iOS4.3。整个框架会fallback到一般的静态位置的toolbar。

如果你希望重新使得它动态,你可以考虑使用一些polyfill

点击下面的演示,看看新版本和旧版本的区别吧。如果需要看到效果,请使用现代浏览器,或者桌面浏览器。

jQuery1.0演示   jQuery1.1演示

而且toolbar现在拥有了一系列的选项方法 帮助你自定行为。包括visibleOnPageShow选项来控制是否页面初始的时候显示toolbar。tapToggle选项来打开或者关闭"toggle-on-tap"特性。show,hide和toggle方法可以使用代码控制显示和隐藏toolbar。

这 里还有一个很重要的小变动,关于全屏定位。在jQmobile 1.0中你可以通过添加data-fullscreen="true“来实现toolbar的"fullscreen"模式。在1.1中,你现在需要添加 这个属性到独立的header和footer容器中而不是页面容器。

更多信息:这里有一些已知的position:fixed和Android 2.2/2.3的问题。请查看详细文档

更多信息:jQMobile1.0使用CSS overflow-scrolling:touch来提升固定的toolbar。因为1.1使用真正的position:fixed,overflow-scrolling:touch已经被删除了。所以这个属性不再有效。

更流畅,更棒的页面过渡效果

jQMobile1.1中最好的一个变化在于页面间更加流畅的过渡效果。因为jQuery Mobile框架工作的方式,需要先滚动到顶端在执行页面过渡效果。下面是整个流程:

  1. 用户向下滚动到目前页面
  2. 点击一个link查看新页面
  3. jQuery mobile滚动到本页面的顶端
  4. jQuery mobile使用过渡效果来实现新页面

这个过程比较不完美,特别对于比较慢的移动浏览器:

更流畅,更棒的页面过渡效果

因为无法避免滚动。所以jquery mobile团队使用了如下方式来处理:

...

来源:jQuery Mobile 1.1 : 更流畅,更快捷,更实用

分享到:
评论

相关推荐

    jquery mobile 1.4.1版

    而`jquery.mobile.inline-svg-1.4.1.css`则是为了支持内联SVG图标,提供了更高效的图形渲染。同时,还有针对不同情况优化的min.css版本,如`jquery.mobile-1.4.1.min.css`,这是经过压缩的版本,适用于生产环境,以...

    jQuery Mobile 开发跨平台移动应用

    ### jQuery Mobile 开发跨平台移动应用 #### 一、jQuery Mobile 概述 **1.1 本地应用还是Web应用** ...随着移动互联网的不断进步和发展,jQuery Mobile 也在持续演进,为开发者带来了更多新的特性和优化。

    使用jquery mobile做幻灯播放效果实现步骤

    通过以上步骤,我们就可以利用jQuery Mobile实现一个简单而流畅的幻灯播放效果,而且这些操作步骤和代码示例为我们提供了一套清晰的实现方案。在此过程中,我们使用到了jQuery Mobile的页面容器(data-role="page")、...

    基于安卓的视频分享系统APP论文(31页9061字数).doc

    - 前端界面设计上,采用HTML5、CSS3和JQuery Mobile,提供流畅的用户体验和响应式布局,适应不同屏幕尺寸的设备。 - 通过AJAX实现页面无刷新更新,提高交互性能,减少服务器负载。 - 数据库设计采用SQL Server,存储...

    手机wrap网站仿拍鞋网商城手机网站模板-wap购物触屏版网站源码整站

    - **前端框架**:可能采用了Bootstrap、jQuery Mobile等流行的前端框架来实现响应式布局。 - **后端技术**:常见的PHP、Java等服务器端语言配合MySQL数据库存储数据。 - **云服务**:可能会利用阿里云、腾讯云等提供...

    phonegap性能优化 以及phonegap + Angularjs + ionic 移动app开发介绍

    - 如果已经掌握了JQuery Mobile或Sencha Touch等其他HTML5移动应用开发框架,学习Ionic仍然具有重要意义。Ionic不仅提供了更现代化的设计理念和技术栈,而且拥有更强的社区支持和生态系统。 **3.4 Crosswalk开源...

Global site tag (gtag.js) - Google Analytics