`

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

    jquery-1.1

    Stock-Data-jQM-1.1:使用YQL检索库存数据的jQuery Mobile 1.1站点

    《使用YQL检索库存数据构建jQuery Mobile 1.1站点详解》 在现代Web开发中,实时、准确的股票数据是构建金融应用的关键元素。本文将深入探讨如何使用Yahoo Query Language (YQL) 获取股票数据,并结合jQuery Mobile ...

    jquery Mobile1.1最新版本

    Jquery mobile针对的是所有的触摸屏幕设备与平板电脑。他为移动WEBSITE的构建提供了一系列布局工具(工具栏,导航等)与UI组件(列表,标签栏)。内建了5套不同样式的CSS主题框架,可以组合应用于移动WEB。 有很多例子...

    jquery-1.1.js

    jquery-1.1.js jquery 历史版本

    jquery mobile 1.1

    jQuery’s mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI ...

    jquery-1.1.3.1.js,jquery.linscroll.js

    标题中的"jquery-1.1.3.1.js"和"jquery.linscroll.js"都是JavaScript库文件,它们是Web开发中广泛使用的jQuery框架的一部分。jQuery是一个轻量级、功能丰富的JavaScript库,它极大地简化了JavaScript编程,尤其是...

    jQuery Mobile 1.0正式发布

    在其下一个版本(jQuery Mobile 1.1)中,将会添加对jQuery 1.7的支持。 jQuery Mobile 1.0现已支持当前大部分的主流桌面、智能手机、平板设备及电子阅读平台,包括iOS、Android、WP7、Blackberry、Plam WebOS、...

    jQuery 1.1 中文文档

    - 这个文档版本是针对中文用户设计的,使国内开发者能更方便地学习和查阅jQuery 1.1的API,提高学习效率。 总之,jQuery 1.1中文文档为开发者提供了详尽的参考,涵盖了从基本操作到高级特性的所有内容。无论你是...

    jQuery Mobile 所需要的部署文件

    jQuery Mobile 是一个轻量级的、基于 jQuery 库的框架,专为移动设备上的网页应用设计,它提供了丰富的用户界面(UI)组件和交互效果,让开发者能够快速构建响应式和触控友好的Web应用程序。这个资源包以“Hello ...

    jQueryEasyUI 1.1完整源代码

    **jQueryEasyUI 1.1 完整源代码详解** ...通过学习和使用jQueryEasyUI 1.1的完整源代码,开发者不仅可以快速构建功能丰富的Web应用,还能提升自己的前端开发技能,更好地理解和掌握JavaScript库的构建方式。

    jquery mobile datepicker 手机端日期选择器

    《jQuery Mobile Datepicker:手机端日期选择器深度解析》 在移动应用开发中,日期选择器是一个不可或缺的组件,它提供了用户友好的界面,让用户能够方便地选择日期。jQuery Mobile Datepicker 是一个专为手机端...

    jquery-galleryview-1.1

    《jQuery GalleryView 1.1:打造超炫图片浏览体验》 jQuery GalleryView 1.1 是一个基于jQuery库的高效、炫酷的图片浏览器插件。它以其独特的设计和流畅的用户体验,深受开发者和设计师的喜爱。这个插件提供了一种...

    Jquery mobile 从设计到开发

    jQuery Mobile 是一个广泛使用的框架,特别适合于移动设备和桌面浏览器。它允许开发者使用HTML5、CSS3和JavaScript来创建响应式网页应用。这个框架之所以在移动开发中受到青睐,是因为它可以将现有的网页转换成触摸...

    jQuery mobile相册的一种样式

    在IT行业中,jQuery Mobile是一种广泛使用的前端框架,它专门用于构建响应式和触屏友好的移动Web应用。jQuery Mobile提供了一系列的UI组件和交互效果,其中包括我们今天要讨论的主题——相册样式。在这个主题下,...

    jQueryMobile-HTML5模板

    1. **统一的触控体验**:jQuery Mobile提供了一套跨平台的触控事件处理机制,确保在各种设备上的滑动、点击等操作有统一的反馈。 2. **自动页面导航**:通过数据-URL(data-url)属性和页面容器,jQuery Mobile可以...

    jQuery Mobile快速入门.pdf

    - **JavaScript API**:掌握 jQuery Mobile 提供的 API,如 `$.mobile.changePage()` 可帮助开发者更好地控制页面间的跳转。 - **调试与测试**:利用开发者工具进行调试,确保应用在不同设备上都能正常运行。 - **...

    jQuery mobile相册

    8. **对话框和面板**:可以使用jQuery Mobile的对话框(dialogs)或面板(panels)小部件来展示大图,提供更好的全屏查看体验。 9. **优化性能**:由于jQuery Mobile默认的增强型渲染可能会导致性能下降,尤其是在...

    jQuery mobile图片截图

    在 jQuery Mobile 中实现图片截图功能,可以帮助用户更方便地分享或保存网页中的图像。 图片截图通常涉及到以下几个关键知识点: 1. **HTML5 Canvas**:Canvas 是 HTML5 中的一个重要元素,允许开发者在网页上动态...

    jQuery Mobile参考手册

    1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 ...4.通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。

Global site tag (gtag.js) - Google Analytics