你的位置： >
> 精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中，我为大家收集了12个基于&&框架的 Ajax 分页插件，这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得&Web&项目的用户体验有了极大的提高，如今借助优秀的&&框架很容易实现各种基于 Ajax 技术实现的功能。我们一起来看看下面这些优秀的分页插件。
1.Client-side jQuery pagination plugin : jPages
jPages&是一款非常不错的客户端分页插件，有很多特色，例如自动播放、按键翻页、延迟加载等等。
2. jPaginate: A Fancy jQuery Pagination Plugin
jPaginate&是一款非常精致的分页插件，提供了五种形式的DEMO，支持鼠标悬停翻页功能。
3. SimplePager – jQuery paging plugin
SimplePager 是非常简洁的 jQuery 分页插件，用最少的参数配置实现满足需要的分页功能。&
4. jQuery ScrollPagination
jQuery 滚动翻页插件&由 Anderson Ferminiano 开发，可以在项目中免费使用。
5. jqPagination A jQuery pagination plugin
jqPagination&提供了一种新颖的分页方式，用表现当期所处的页码形式取代传统的页码列表模式。
6. Extreme Makeover: jPaginator CSS3 Edition
jPaginator&这款分页插件用于改进长翻页列表的用户体验，使用一个滑动条来快速翻页。
7. Sausage : jQuery infinite Pagination with Demo
Sausage 是一款非常优秀的分页插件，用于实现页面的无限制滚动分页功能。
8. Xarg : Ajax jQuery Pagination
Xarg jQuery 分页插件，有多种分页形式供选择，可以帮助你实现各种需求的分页效果。
9. jPaginator: jQuery Pagination Plugin
jPaginator 是一款非常轻量的 jQuery 分页插件，也非常有特色，提供了方便使用的滑动翻页功能。
10. jQuery Pagination Plugin
这款分页插件虽然效果简洁，但是是学习 jQuery 翻页功能非常好的例子。
11. Sweet Pages: A jQuery Pagination Solution
Sweet Pages 是效果非常精美的一款分页插件，效果有点类似于幻灯片的翻页。
12. AJAX Pagination using jQuery and PHP with Animation
最后推荐的这款 jQuery 分页插件拥有充满吸引力的动画效果，相信你会喜欢的。
转载请注明： &
与本文相关的文章Jquery mobile 新手问题总汇 - Warren的个人主页
Jquery mobile 新手问题总汇
01:40:00.0 /
分类: / 标签:JqueryMobile,Jqm
欢迎 比较典型的常见问题，我会记录并整理进文章，方便自己更方便大家。
文章导读：
1页面缩放显示问题
页面似乎被缩小了，屏幕太宽了。
解决办法：
在head标签内加入：
&meta name="viewport" content="width=device-width, initial-scale=1"&
2 页面跳转后样式丢失js失效
用ajax跳转的时候，从a.html跳转到b.html后，b.html的css以及js都失效了。
解决办法：
将当前页面需要用到的css以及js放在&page&div内。
由于jqm的ajax跳转的时候，只会把b.html中&page&内的内容加载进dom,而&page&外的代码都不会加载，所以导致在&page&外的js和css都失效了。
3 跳转时重复调用pageinit方法的解决办法
用ajax跳转的时候，从a.html跳转到b.html，用从b.html返回a.html等等这种反复跳转的时候，pageinit方法内的代码会调用多次。
解决办法：
在page中加入 data-dom-cache="true"属性，如：
&div data-role="page" id="myPage" data-dom-cache="true"&
然后把pageinit方法换为pageshow,如：
$("#myPage").live("pageshow", function() {
//...do something
4 如何调用loading效果
//显示loading
function showLoading(){
$.mobile.loadingMessageTextVisible =
$.mobile.showPageLoadingMsg("a", "加载中..." );
//隐藏loading
function hideLoading(){
$.mobile.hidePageLoadingMsg();
扫描查看Demo：
5 动态改变了list的内容，但是内容并没有变化
解决办法：
调用组件的refresh方法，刷新list,如：
$("#contentList").append(content).listview('refresh');
jqm组件的显示原理是把原始的web组件隐藏，而用jqm自定义的UI组件来代替原始的web组件显示。动态的改变了list的值，其实改变的是原始组件list的值，而jqm的list组件的值并没有被更新，所以需要调用list组件的refresh方法来使其更新并显示。
此问题不只局限于list组件，基本所有的jqm UI组件在改变值之后都需要调用组件对应的refresh方法，例如button组件( $('#id').button('refresh') )等等。更多刷新方法请查看：
6 把所有内容放到一个页面好,还是分开多页面好？
对于这个问题，说说笔者的个人见解：
#1所有内容放到同一页面
#2分页面存放内容
对于#1，如果是比较简单的网页内容，可以考虑把内容都放在同一个页面。但是如果页面结构很复杂，跳转页面比较多的话，那#1就会显得很臃肿，增加维护的复杂度。
而#2比较适合页面结构以及页面比较多的情况，易维护。
性能方面，笔者查了一些资料，也亲自做了些实验，并没有发现性能上的明显差异。
结论：根据个人编码习惯，两种选择都是可以的。推荐#1和#2混合使用。
7 如何禁掉ajax跳转？
尽管ajax跳转有很炫的转屏动画，但是在某些时候为了性能或者为了业务需求还是需要禁掉ajax跳转的。
解决办法：
禁止ajxa跳转有两种情况：
1、禁止局部ajax跳转
2、禁止全局ajax跳转
对于#1只需要在a标签中添加下面的属性：
data-ajax=“false”
有时我们要用正常的http请求而不用Ajax请求，比如链接到别的网站等情况。通过给a标签加下面的属性，可以将链接指定为正常的http请求:
rel=external
对于#2我们需要设置一个全局的禁止ajax跳转的方式，js代码如下：
$(document).bind("mobileinit", function() {
// disable ajax nav
$.mobile.ajaxEnabled=false
注意：上面的代码片段需要放在jquery.mobile-xxx.min.js引入之前。
顺便说一句，初始化的设置都需要放在此处，例如加载错误信息的设置：
$.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';
8 为什么android2.3系统转屏无效果？
发现在android2.X系统测试的时候slide等转屏效果并没有很好的显示，而是一闪而过了。但是在android4.0+显示却正常。
问题分析：
之所以android2.X系统对slide等转屏效果支持不是很好，是因为slide等效果都需要3D支持，而android2.X系统不支持3D,
而JQM遇到这种情况的时候把slide等效果“退化”到淡入淡出效果，根据笔者的测试即使这种淡入淡出效果也不尽人意，感觉有点像“闪屏”，在这种情况下直接把转屏效果设置为none，反而比这种淡入淡出看着更舒服。
既然android2.X不支持3D转场，但是android4.0支持，我想在4.0系统保留转场效果，而在2.X上去除转场效果怎么办？
解决办法很简单，只需要加入下面的代码即可：
$.mobile.transitionFallbacks.slideout = "none"
更多关于“闪屏”的问题，请看：
9 如何去掉jqm自带的组件样式？
尽管jqm提供了比较美观的组件样式，但是有些时候我们需要去掉jqm自带的样式。
解决办法：
解决办法很简单，只需要在组件中加上如下属性就可以了：
data-role='none'
10 jquery mobile “闪屏” 问题
Important: Some platforms currently have issues with transitions. We are working on a solution to solve the problem for everyone. If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround. Please note that this workaround should be thoroughly tested on the target platform before deployment. This workaround is known to cause performance issues and browser crashes on some platforms, especially Android. Add the following code to your custom css.
.ui-page { -webkit-backface-visibility: }
即使加上官方提供的css代码片段，效果仍旧不尽人意，这个问题到现在仍旧是jqm的一个比较严重的问题，希望下个版本可以解决此问题。
除了在 中提到的内容外，近日在群里聊天，提出一个可以缓解的方案，即：可以更改jqm的css,让闪的背景色和页面的一致，具体修改以下css:
.ui-body-c, .ui-overlay-c {
border: 1px solid #AAA;
color: #333;
background: #F9F9F9; //修改这里的颜色代码
我想这是一个很好的思路，是个值得一试的方法，但是笔者还没有亲自实验，需要的朋友可以亲自试一试，有空的话记得回来在评论里发表一下实验结果哦。
11 按钮按下/划过的状态感觉反应有些迟缓？
解决办法很简单，只需要加上如下设置就可以了：
$.mobile.buttonMarkup.hoverDelay = "false";
12 jquery mobile各类组件刷新方法
1、Combobox or select dropdowns
var myselect = $("#sCountry");
myselect[0].selectedIndex = 3;
myselect.selectmenu('refresh');
$( ".selector" ).selectmenu( "refresh", true );
2、Listviews
$('#mylist').listview('refresh');
3、Slider control
$('#slider').val(80).slider('refresh');
4、Toggle switch
var myswitch = $("#toggle");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");
5、Radio buttons
$("input[value=grid]").attr('checked',true).checkboxradio('refresh');
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );
6、Checkboxes
$('#checkbox-1').attr('checked',true).checkboxradio('refresh');
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );
7、Buttons
$( "[type='submit']" ).button( "refresh" );
$( ".selector" ).buttonMarkup( "refresh" );
8、Column-Toggle Table
$( ".selector" ).table-columntoggle( "refresh" );
9、Reflow Table
$( ".selector" ).table( "refresh" );
13 在页面动态添加组件，发现css消失了
首先请试一试上面问题12的解决方案，如果没有效果的话，那就试试加上.trigger('create')，例如：
$("#id").html(content).trigger('create');
$.mobile.pageContainer.trigger("create");
14 关于checkbox取值问题
网友在checkbox取值的时候，发现官网并没有提供相关方法，通过查阅资料终于找到了取值方法，并找到我分享在此，再次感谢的分享精神！
取值方式如下：
$(.checkbox)[0].checked
15 点击屏幕，header和footer会略微抖动？
在真机运行的时候，轻击屏幕会发现header和footer有略微的抖动。
解决办法：
在header和footer中添加如下属性：
data-tap-toggle="false"
添加这个属性也可以解决点击屏幕header或footer消失问题。
16 jqm图标|图标定位|隐藏图片上的文字|去除图标阴影|自定义图标|去除按钮阴影/圆角
1、图标定位 data-iconpos
默认情况下，所有的图标都放在按钮的按钮文本左。此默认可以覆盖使用 data-iconpos 属性来设置图标的右上方（top）、底部（bottom）、右侧（right）、左侧（left）的文本
2、隐藏图片上的文字 data-iconpos=”notext”
你也可以创建一个图标按钮，设置 data-iconpos=”notext”。按钮插件将隐藏的文字在屏幕上，但把它作为给屏幕阅读器和设备支持工具提示上下文链接标题属性。例如，data-iconpos=”right”，data-iconpos=”notext”：
3、自定义图标 data-icon=”自定义值”
使用自定义图标，需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类，它的前缀是ui-icon- ，后面的是data-icon值。假如：有一个按钮 data-icon 属性的值为 myapp-email，即 data-icon=“ myapp-email”。那么生产的CSS类是：ui-icon-myapp-email。
然后你可以在你的样式表写一个CSS规则来定义 ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性，请创建一个白色18×18像素的PNG-8图标，并且保存为Alpha透明度。
.ui-icon-myapp-email {
background-image: url( "app-icon-email.png" );
这将创建标准分辨率的图标，但许多设备都有非常高的分辨率的显示器，就像iPhone 4的视网膜显示器。添加一个高清图标，创建一个图标，36X36像素（18像素大小完全相同的两倍），并添加第二个规则使用WebKit分钟装置像素比例：2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18×18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则：
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-myapp-email {
background-image: url( "app-icon-email-highres.png" );
background-size: 18px 18
...more HD icon rules go here...
4、去除按钮阴影/圆角
data-shadow=”false”
data-corners=”false”
本小结引自：
17 jqm组件显示正常，但是小图标是“空的”，没有正常显示
例如header中的返回按钮，按钮的显示和功能都正常，但是按钮上的“返回小图标”没有显示。
解决办法：
这是由于没有引入jqm的图片文件引起的，解决方法是在jqm的资源包里找到images文件夹，并把images文件夹引入自己的项目，与jqm的css文件放在同一级目录里。
18 $.mobile.changePage方法不能正常跳转
$.mobile.changePage不能跳转，而window.location.href却可以正常跳转。
这个问题牵扯到jqm的跳转机制了，简单的说jqm的默认跳转方式，也就是$.mobile.changePage这种方式，原理是ajax跳转。听起来很神秘，其实就是通过ajax动态的把目标页面的内容加载到当前的dom中。当多页面跳转的时候，通过ajax跳转，就存在ajax跨域的问题。所以解决目前的问题，其实就是解决ajax跨域的问题。
解决办法：
为了解决跨域问题，我们需要把项目放在服务器环境下。好多朋友不知道什么叫服务器环境，说白了就是把项目部署到WAMP或者TOMCAT等等的服务器下，然后通过http://localhost/xxx 这样的方式访问项目。
小结：这里提到了jqm的跳转机制了，笔者之前写过一篇文章：，这篇文章完全没有用jqm，而是模拟了jqm的跳转过程，想深入了解jqm跳转的朋友可以看一看这篇文章的实现原理。
19 ...还有什么需要补充问题？
原创文章，转载请注明出处：
亲，忘记输入评论内容了吧？
10:58:33.0
19:08:45.0
用了 data-ajax=false
但是手机上面就加载不出来数据了
14:28:10.0
我在调用mobiscroll时间插件时，为何初次进入获取时间的页面时，无法调用必须把当前页面refresh一次，才能调用mobiscroll？
09:40:20.0
写的非常不错，期待更新
09:51:35.0
13:54:34.0
为什么我动态添加div的时候加了
.trigger(&create&);还是没有效果啊。我看网上都是这么说的，但我弄了一天了，还是没有动态渲染啊，真实烦死了
16:15:30.0
写的太好了 赞一个 赞
16:48:26.0
我利用changePage 加载页面元素时 jquery 报 parseJson 出错
09:35:59.0
适用ajax跳转，如果页面不设置缓存的话，页面切换后是会被删除的，所以不会跟其他页面冲突；如果设置了页面缓存，那即使切换了页面，该页面也还是在dom中的，所以在ID命名和js编写方面要牢记这一点，以免写的ID或者JS与其他页面冲突了。公用的js和css就放在入口页面里，ajax跳转到其他页面的时候都可以访问到这些内容。Thanks
14:58:53.0
点了32个赞
16:06:01.0
你的总结会节省我大部分时间，在此感谢，有个问题请教一下：
jqm使用ajax切换页面，对于切换新页面的js,css问题，你的第二点已描述清楚。但存在一个js冲突问题：a页面ajax到b页面，再从b返回到a页面。这个过程，其中返回到a页面时，b页面的js会存在在a页面(可能会存在冲突),但在b页面中，a页面的js不存在(正常)。请问这是不是一个bug。还有就是楼主如何部署js和css文件，因为每个页面都用公用的css和js，是不是每个页面都要写呢。
11:24:22.0
爱死你了~~
13:45:22.0
发现了一个情况是，尝试panel弹出后隐藏点击按钮及增加掩盖层，会出现点击了按钮之后，只改变按钮CSS，而没有解决点击事件造成panel无法打开的情况
22:37:45.0
貌似没有介绍，直接看CSS源码吧
13:26:10.0
请问一下在jqm中，有很多丰富的UI库，这个哪里有相应的API文档？例如：，没有想要的API介绍这些css
12:02:03.0
@我是猫 changePage事件是jqm自带的不需要引用其他文件。但是使用这方法必须目标page已经在dom中。要么是单页面程序，要么需要预先load进目标page.
11:36:05.0
请问我怎么没有$.mobile.changePage（“#sss”）事件呢，没反应.处理在表头引用jQuery.j和jQuery.mobile.js外，还要引用什么。
15:28:27.0
真心感谢~ 的确解决了好多问题，楼主辛苦了
17:11:12.0
请问有JQUERY MOBILE和JSONP分页的代码吗，获取远程服务器端的数据，用PHP来做
21:52:07.0
谢谢你！ 读了你的短文 我解决了切换页面刷新 白屏的问题
10:40:01.0
谢谢你的分享
23:33:47.0
感谢博主，解决了我N个问题。
09:17:37.0
为什么phonegap+jqm在android2.3系统里面，有个弹出层，弹出层里面有输入框，当弹出软键盘输入文字的时候，页面会跳动，有时候软键盘一直跳动。。
10:28:08.0
谢谢楼主给了解决的思路。
第二点中有一个更好的解决方法。使用正常的http访问跳转而不是使用ajax跳转，这样子就不需要对B页面进行大改变。使用方法，在跳转的的a标签中增加data-ajax=&false&属性即可。
02:50:10.0
谢谢哦，找到了一个答案，解决了我的问题
16:15:23.0
看完很有价值
10:00:34.0
回答得都不错，解决了我所面临的好多问题。
22:06:52.0
想请问,以下我这个测试页
http://www.outway.net/wap/test.htm
在首页时，绑定的向右滑动时弹出panel面板运作正常，而连接(ajax)test2.htm时，向右滑动就不行了，需要普通连接到test2才可以，请教 应该怎么解决.
11:18:29.0
请问从第一个页面跳转到第二个页面，为什么第二个页面的page加上组件内的后退按钮，不显示呢？
23:46:10.0
真是太及时了，谢谢
15:45:21.0
很好，看了你的解决办法，解决了我的问题，多有点这样的人世界多美好啊
02:51:48.0
还有就是有时候在跳转的时候发现跳转后的组件不能用，打开chrome的resources发现stylesheet还是前一个界面，要刷新一下才能正常，请问这是为什么，我的按钮已经加了ajax=false
02:40:41.0
有时候莫名其妙就出现这个错误，Uncaught TypeError: Cannot call method 'call' of undefined，查看发现时jqm里面说$.event.dispatch.call( obj, event );这句话里面不能调用方法call，这是为什么
11:49:35.0
太及时了 几乎新手遇到的问题都概括了
14:53:58.0
你太给力了，强力支持一下
11:51:23.0
楼主非常不错，值得学习，值得敬佩！
10:41:34.0
15:51:03.0
新手学习来看看，很不错
14:47:04.0
谢谢，非常好
15:04:17.0
@葬月 当然也是可以的，只要保证需要的js和css能加载入dom就可以的。
15:00:38.0
博主你好，请问关于问题二，除了“将当前页面需要用到的css以及js放在div内”之外，如果在a.html中把b.html使用的js加载进来可以吗？
15:56:39.0
23:59:20.0
路过，路过。
15:31:19.0
楼主高风亮节，助人为乐。
09:11:27.0
写的非常好
11:12:37.0
很好 支持楼主 希望楼主百忙之中勿要忘记继续更新啊哈哈 辛苦了
本站移动版本
Android版本扫描下载：
评论成功！新书：《24小时学会jQuery Mobile》
　　最近出版了Phil Dutson的一本新书《24小时学会jQuery Mobile（Sams Teach Yourself jQuery Mobile In 24 Hrs）》，它向web开发者介绍了如何使用jQuery Mobile构建移动Web应用。这本书分为24个独立的章节，希望读者在每个章节上花费一个小时。
InfoQ：你没有使用任何特定的服务端编程语言，而主要专注于表现层，对于想要阅读本书的程序员来说，在阅读之前你认为至少要拥有哪些经验呢？
Phil：使得jQuery Mobile 框架如此强大的原因之一就是，刚刚开始web开发的开发者就可以使用它，而不需要很多知识。我建议读者拥有足够的HTML和CSS的知识，从而能够创建网页。尽管这么说，本书还是适用于所有技能等级的开发者。对于新开发者，首先我给出了关于HTML、CSS和JavaScript的预备课程，然后向他们展示可以如何使用已经具备的知识创建漂亮、功能完整的站点，而不需要经历陡峭的学习曲线。
InfoQ：你曾经提到过，针对触摸屏和鼠标界面的编程有几处关键的区别，比方说touchstart和click事件之间细微但不容忽视的区别。如果你要列举出一些最重要的区别，会是哪些呢？
Phil：jQuery Mobile另一种非常适合的情况就是，需要考虑你所使用的设备的支持。你已经指出，touchstart和click事件之间有不容忽视的区别，另一种区别就在于使用swipe事件。使用带按钮而没有触摸区域的鼠标的桌面用户无法做出滑动的操作，从而与网站或者应用程序交互，而使用触摸操作的用户需要使用滑动来滚动或者操作数据。另一种在移动设备上常见的事件是按住并保持（tap-and-hold）。jQuery Mobile针对桌面用户处理了这个事件，让他们可以点击并保持（click-and-hold），从而触发相同的事件。
InfoQ：你发现，使用或者不使用jQuery Mobile的时候，开发者在创建网站的移动版本时，出现的最大错误是什么？
Phil：使用jQuery Mobile框架当然会让你先了解如何处理当前的大多数移动设备，然而我还看到一些相当差的实现，开发者没有花费时间合适地针对所使用的设备来调整站点的格式。有些站点跳过了很多步骤，像使用内建的网格系统，或者使用大量自定义的class处理使得CSS过于复杂，这样，当设备从横向转到纵向的时候，就无法正确显示。
不使用jQuery Mobile，我遇到的最大问题是很奇怪的双击行为，它会发生在touchstart和click事件没有正确绑定的时候，从而导致在对话框上的点击会穿透到下面（这很多是发生在模态或者对话框窗口和下拉菜单的导航上）。对事件的不合适处理是移动用户非常头疼的严重问题。
InfoQ：你也提到了虚拟的鼠标事件，可以有助于解决移动和桌面应用的兼容性问题，你可否说明这在哪里有用，而在哪里应该避免使用，最好能够提供一些例子？
Phil：如果你曾经在移动设备上访问过使用下拉菜单或者导航栏的站点，那么当你在移动设备上点击的时候，就会被站点闪出菜单的方式弄得很郁闷。这在我和一家特别大型的在线零售商打交道的时候是最大的问题，每次我从移动站点切换到完整站点的时候都会出现。尽管他们现在已经修正了这个问题，但其实当时我们可以检测悬停（hover）事件，并使用虚拟鼠标事件来处理它。你只需要绑定mouseover事件，使其在载入页面的pageinit阶段运行，就可以处理这种非常复杂的事件。
另一种可以使用虚拟鼠标事件的地方是在使用鼠标输入来绘制或者创建直线的web应用程序中。使用这些事件，你可以获得屏幕的精确触点，并过滤那些用来基于触摸或者滑动点跟踪、绘制或者操作的数据。
InfoQ：你在整整一个小时/章节中专门讨论视频和音频的编码格式以及各种编码工具。你能否简要地说明，作为移动网站的开发者，知道这些细节为什么很重要？
Phil：这来自于电子商务的视角，富媒体是促进或者突破产品销售的方式之一。随着移动设备销售和激活的剧增，需要一种方式把那些内容传递给消费者。不幸的是，并非所有设备都以统一标准创建，只有很少设备会处理同样的媒体类型。当Motorola Xoom发布的时候我了解到的一些事情是，即便它运行Android，应该拥有大量回放的编解码器，但是在试图播放同一个在iPad上可以完美播放的MP4文件时，会非常不幸地出现问题。对于想要把视频推送给消费者的web开发者来说，知道如何对视频编码，能够以及应该使用哪种编解码器，以及这与文件大小和分发有什么关联都非常重要。对小型的工作室，他们没有财力支持和流视频提供商协作，这尤其重要。另外，还要知道的很重要的一件事是，从那里产出的软件与使用商业解决方案的软件相比，想要得到相同的结果，要付出更多代价。
InfoQ：作为web开发者，你在什么时候会考虑创建本地应用（或者使用类似于titanium或者phonegap的技术创建跨平台的应用程序）而不是移动web应用呢？ （根据应用所需要做的事情）
Phil：这真是一个很难回答的问题，我也无法给出快速而可靠的答案。它实际上取决于你的具体情况，以及你想要用应用程序做什么。例如，如果你构建的是游戏，想要压榨出最大的性能、声音和特效，那么很大程度上你应该考虑构建本地应用程序。那并非是说你无法做出让人惊叹的HTML 5应用程序，只是说你无法使用移动设备所包含的所有特性。企业级开发者可能对构建混合式应用程序（使用PhoneGap/Cordova或者Appcelerator/Titanium构建的应用）很感兴趣。这让它们拥有深入设备硬件控制的灵活性，同时还可以加入新特性，检查更新，并支持来自于web应用程序端的附加应用程序安全性。
你需要的只是坐下来决定应用程序要做什么，你计划如何分发和更新它，以及它是否依赖于摄像头、gps、加速计等设备控制器。一旦你做出了这个列表，就可以开始专注于应用程序需要什么，然后就可以专心于你所需要开发的内容了。
InfoQ：你使用过其他专门用于移动开发的框架，像Sencha和JQTouch吗？ 对那些框架有什么看法吗？
Phil：我曾经涉猎过Sencha，知道一些开发者非常喜欢它。Sencha是一种非常棒的框架，真正有助于改善本地应用程序的感观。我认为他对于真的想要深入探究框架语义并推动它用于开发支持触摸屏的web应用程序的开发者来说非常棒。也就是说，我发现，相对于习惯于使用jQuery的人来说，这个框架让更多人可以参与进来。
Dojo Mobile是另一种我了解过的框架，尽管我发现它在某些属性上非常类似，但我认为它还是有些笨重，在跨设备和浏览器的情况下，无法达到我期望的渲染效果。话虽如此，它是一种非常稳定的框架，构建在另一种非常稳定和测试完备的框架（Dojo）之上。
至于jQTouch，是我最先开始研究的移动框架中的一种。当我第一次载入该框架的时候，就被其中的主题以及页面转换所吸引。可能熟悉jQuery的人不会感到太惊奇，其中的页面转换最初就是从jQTouch借用过来的，并做了一些调整。
InfoQ：在各种移动设备之间是否有某些特定的不一致性，如果不存在的话，是否会让开发者的生活更轻松？
Phil：尽管我更愿意花费时间专注于各种移动设备所提供的好东西，但还是有一些设备和平台，并非总是能够表现得很好。对很多设备，触摸/点击事件会导致问题，而且确定样式也总是一种痛。在理想的情况下，会有一种浏览器来规定他们的规则，那可能会是基于Webkit。那并不是说其他设备的本地浏览器不可用，或者说其他移动浏览器像Opera Mobile和Firefox Mobile在显示移动web应用上做得不够好。那只是说，每种设备和浏览器看起来都认为它们知道如何渲染一切，而且他们的方式显然是正确的。这正是jQuery Mobile之类的框架起作用的地方，你只需要设计一次，然后框架就会完成大量工作，确保大多数设备都能够尽可能像你最初设计的那样渲染应用程序。的确，它并非总是可以像你期望的方式一样工作（像投下阴影，偶尔圆角看起来会有些偏移），但是通过经常更新，通过框架实现各种支持，会使得开发者的工作变得更轻松。
InfoQ：你可否举个移动网站或者web应用的例子，说明它是很优秀、以移动设备为中心的设计？
Phil：有一些站点支持响应式设计，从而为移动设备提供内容，还有不少使用jQuery Mobile的站点，在为用户提供优秀移动体验方面做得很棒。Adidas、迪斯尼世界以及Verizon都为用户提供了非常好的移动体验。这些网站还支持对于移动用户非常重要的功能&&定位程序。尽管这个特性似乎偶尔会被遗忘，但它对于需要找到实体的用户非常重要，或者在迪斯尼世界应用中，可以在公园中找到这个人。如果你能抽出一分钟，那么取出移动设备并快速浏览一下这些站点，你会看到非常易于导航的站点，展示给你简单、清晰的界面，让你能够最大化购物或者找到信息的能力，并且不会耗尽所有带宽。这些站点还能够很好地扩展，所以如果你拥有平板电脑或者大屏幕移动设备的话，你会看到美观、易用的站点。对于其他使用jQuery Mobile构建的站点，确保要查看。
InfoQ：对于移动web应用，你预见到哪些暂时没有，但会很快具备的功能？
Phil：随着浏览器技术和设备速度的提升，本地应用程序和web应用程序之间的界限变得越来越模糊。随着HTML5发布最终版本的日子越来越近，视频和音频整合的标准也即将确定，而且用不了多久，它们就会在移动设备中完整实现。你现在可以依赖所使用的容器和编解码器播放视频，这让web开发者可以提供非常丰富的媒体体验，并对最终用户降低延迟，优化视频和音频的播放。对websocket的完整支持还会帮助开发者为实时数据传输创建低带宽的解决方案。另一种值得注意的功能是对CSS3在所有移动设备上的完整支持，可以用于转换、动画和样式。CSS3极大地减少了渲染所需的元素、请求和带宽，从而可以创造出非常炫的应用程序。值得密切关注的项目是Firefox OS，它会提供一种构建在HTML5之上、在Gecko引擎中渲染的操作系统。这很有希望成为未来移动web开发者获得创意的资源，从而创建并提交他们自己的创意，同时有助于进一步推动移动web设备功能的发展。
这篇文章基于《Sams Teach Yourself jQuery Mobile in 24 Hours》这本书，作者Phil Dutson，由Pearson/SAMS在2012年7月出版，ISBN是，SAMS出版社2013版权所有。想要获得更多信息，请访问出版商的网站
关于书的作者
Phil Dutson 是ICON Health and Fitness的首席前端开发工程师，该机构是世界上最大的在线健身设备零售商。在那里他专注于跨多种浏览器和平台创建无缝的客户体验。它曾经从事过NordicTrack、ProForm、Freemotion、Sears、Costco、Sam's Club等项目。他最初是iFit项目的团队成员，该项目把Google Maps整合到个人锻炼的创建和回放中。Phil共同创建了&The E-Com DevBlog&&&专注于web开发和解决方案的开发博客，并且当前在管理它。
查看英文原文：
好文,顶一下
文章真差,踩一下
------分隔线----------------------------
把开源带在你的身边-精美linux小纪念品
初级应用->
高级应用-> |
编程开发->