jquery移动端滑动事件

jQuery Mobile库的早期版本是在一周前发布的。 考虑到jQuery库在传统桌面Web开发中的流行,我希望大多数Web开发人员会对这个版本感到非常兴奋。 但是jQuery Mobile到底是什么?在哪些情况下会考虑使用它?

名字叫什么?

首先,jQuery Mobile的名称有点让人误解:它不是一组核心jQuery库的移动版本,而是一组可以轻松插入页面的接口组件。 它位于您将在常规页面中使用的同一jQuery库的顶部。 实际上,它更像是jQuery UI库的移动版本。

好吧,那里面有什么?

jQuery Mobile本质上是用于处理页面的框架。 这些“页面”可以是整个HTML文件,外部页面,甚至是单个HTML文件中的部分。 然后,该库负责使用一些时髦的过渡效果通过Ajax将它们链接起来。 在页面内,jQuery Mobile为您提供了一系列样式一致的界面组件:工具栏,按钮,每种可想象的列表以及表单控件。 请查看“ 文档和演示”页面,以完整了解其中包括的所有内容。

一路进步,宝贝

jQuery Mobile对框架采取了一种有趣而新颖的方法:使用它所需的所有工作都将在您的标记中进行。 无需编写任何JavaScript代码,即可激活大多数界面组件并将其激活。 HTML5数据属性使这成为可能。 因此,例如,要使用滑块组件,您需要做的就是在标记中添加以下内容:

<div data-role="fieldcontain">  <label for="slider">Input slider:</label>  <input type="range" name="slider" id="slider" value="0" min="0" max="100"  /></div>

这些data-属性为jQuery Mobile提供了创建如下所示的滑块所需的提示:

jquery移动端调用jsp jquery 移动端_jquery移动端调用jsp

jQuery Mobile的滑块控件

jQuery Mobile对它所做的所有事情都采用了类似的渐进增强方法。 这个想法是,无法识别HTML5 doctype或data- attribute的浏览器将只收到纯净的原始网页,这对于那些用户来说是可以接受的体验。 无论如何,这就是理论。

我们确实告诉过您这是Alpha版,对吧?

目前,该框架仍然存在很多问题。 我无法在桌面浏览器(Firefox 4)上实现简单的外部链接,如果在点击它们之前滚动页面,则所有链接都无法在Android 2.1设备上正常工作。 鉴于该库的主要任务之一是在其未完全支持的任何平台上提供可接受的但降级的体验,因此,据说A级浏览器上的此类损坏有点令人担忧。 此外,我在同事的iPhone上进行了一些测试,并且性能与理想情况相差很远:滚动比常规网页要粗糙得多,过渡和动画有点不稳定,并且某些链接无法可靠地工作。

要本地化吗?

虽然jQuery Mobile当然是一项令人印象深刻的工作,但我不禁感到它的适用范围将非常狭窄。 如果不依靠浏览器的大部分功能,大多数移动Web应用程序的性能将更好,并且iOS上的应用程序既可以表现得更好,并且如果它们实际上是本机的,则看起来也更本机。 基于每页顶部默认包含后退按钮等设计决策,我猜测该项目的主要目的是为最终的本机部署开发应用程序。 如果要用于Web应用程序,肯定要依靠浏览器的(或设备的)后退按钮更好,对吗?如果您想为iOS开发具有本机感觉的应用程序,并且还可以使用类似的框架移植到其他平台一旦问题解决,PhoneGap和jQuery Mobile可能是一个有趣的解决方案。 如果您可以为非iOS用户提供一个可以模仿默认iOS行为的界面,但是,如果您打算让您的应用在浏览器中运行,那么在我看来,jQuery Mobile可以为您提供不必要的“三重奏”效果,并且可能会对某些用户的体验产生不利影响。 单击后打开新页面的链接没有错; 这就是您的用户所期望的。 只是为了“感受本机”而增加滑动(或弹出或淡入淡出)的Ajax负载,似乎有些错误。 用JavaScripted自定义版本替换本机浏览器表单控件也是如此。 大多数用户将对他们的操作系统或浏览器提供的表单控件更满意。 当您只需要使用复选框并节省下载所有JavaScript的成本时,为什么您的Web应用程序需要iOS样式的开关? (当然,我确实相信有一种自定义表单控件的用途,而大多数网页浏览器的当前版本都没有实现自定义表单控件,例如上面的滑块。)但是也许就是我。 如果您已经玩过jQuery Mobile,您有什么想法?

注意:需要更多吗?

如果您想了解更多来自Louis的信息,请订阅我们的每周技术新闻通讯Tech Times

翻译自: https://www.sitepoint.com/jquery-goes-mobile/

jquery移动端滑动事件