软件工程师-经典收藏50个jQueryMobile开发技巧集萃.docx

《软件工程师-经典收藏50个jQueryMobile开发技巧集萃.docx》由会员分享，可在线阅读，更多相关《软件工程师-经典收藏50个jQueryMobile开发技巧集萃.docx（16页珍藏版）》请在三一文库上搜索。

1、经典收藏50个jQueryMObile开发技巧集萃我们收集了50个出色的jQueryMobile技巧、移动插件、实例、组件和教程，帮助你立刻把新的移动网站构建起来,并让你的用户能有更棒的体验。AD：51CTo独家特稿】jQueryMobiIe是什么？jQueryMobiIe是一种用于开发Web应用程序和移动网站的框架，旨在提供适用于多种平台的统一用户界面，比方iOS、BlackBerryAndroid和Winde）WSMobiIe等平台。51CTO推荐专题：jQueryMobile基础入门教程1、BaCkbone移动实例BackboneMobMeFloriditasBackboneMobile

2、Example这是在Safari中运行的一款BaCkbOne移动应用程序。想开始体验移动开发，一个好的出发点就是关注这个应用程序的构建方式。先不妨在你的浏览器中查看该应用程序。相关链接:2、使用媒体查询来锁定设备Mediaquerieitotargetdeviceskpbo*ec”mdrrowdtRk.6wecss你可能会问如何使用CSS来锁定设备（根据屏幕尺寸）。比方说，你想要为iPad设计两列布局、为智能手机设计单列布局。要做到这一点,最正确方法就是使用媒体查询。只要一些简单的媒体查询已到位，你就能迅速让CSS锁定屏幕尺寸。相关链接：3、快速技巧：如何使用Font-face可几个字体更换方

3、法可以使用，比方CUfor1、sIFRFLIR、fOnt-face和GoogIeFontsAPIo使用jQueryMObiIe构建Web应用程序时,我发现fOnt-face方法是用起来最容易的方法，其性能让人相当满意。相关链接：4、何处添加额外的jQuery调用如果你想在移动插件被触发之前改动页面上的内容，那么建议的解决方法就是只要把传统的jQuey调用放在装入移动插件的引用之前。这样，你的jQuery命令就有时机在库装入之前运行。相关链接:5、完整的根本页面你可能发现自己一再需要为根本页面建立完整的标记。正因为如此，这里是创立一个根本页面所需要的全部代码。相关链接:6、自行创立列结构Fill

4、erFgOrderColumns,BloCk1BlOCk3fillermVfiHcc钏ft,rMefColumnStr如果你想为多个设备设计最正确的单个页面结构，会发现自己经常结合运用上述的媒体查询技巧和“随意顺序的列(COIUnmSinanyorder)方法。幸好，Web开发人员很早以前就弄清楚了如何移动列以及结合运用这个方法和媒体查询。相关链接:7、结合使用谷歌分析(GoogleAnalytiCS)工具和jQueryMobile可以学习如何结合使用谷歌分析(GOOgIeAnaIytiCS)工具和jQueryMobileo相关链接:8、通过AJAX和PHP,提交jQueryMobiIe表单5

5、SubmitaformviaAJAXCallAjaxMobUeforaYiaAJAXwithPKP可以学习如何通过AJAX和PHP,提交jQueryMobiIe表单。相关链接:9、如何使用jQueryMobiIe来创立移动WOrdPreSS主题BackTestofaPOStMhaverylong*.UHemsn。Q这个工具让你很容易创立移动网站和Web应用程序。在这个教程中，我会介绍如何创立针对移动设备优化的WOrdPreSS主题。相关链接：10、使用jQueryMobile来创立网站，第一个局部MobileDev2011ebestCOnfefen8IShee,Leamhcwt/WeWteit

6、aJQoeryMobile,Pad1在这个教程中，我会介绍如何使用jQueryMobile来创立网站。在该教程的这第一个局部中，我会解释网站的特点，还会实施网站的主页。相关链接：11、使用jQueryMobile来创立网站，第二个局部HyEVent.、，tJ_ta*，-U，a/U一Mf,*rel-styleyWebriteVsingoeFMobile,Pait2/111ri作为如何使用jQueryMObile来创立网站这个系列的下一个局部，现在介绍构建扬声器(SPeakerS)页面。相关链接：12、禁用按钮动作(one-buton).button(disable)；Andtore-enabic

7、jt：Disableabuttonaction下面介绍如何禁用按钮动作(比方说禁止翻开页面)，添加以下JavaScripto相关链接：13、创立弹出式对话框jQue:TyMObiIe库的一项便利特性就是内置的弹出内容或对话框特性。创立这项便利的特性简单得很。注意：首先，目标页面必须是完整的jQueyMObiIe页面，如第一个技巧所概述。其次，这只适用于外部页面;它必须是完整的单独页面才能正常工作。相关链接：14、jQueryMobile简介可以学习如何使用jQueryMObiIe框架。这个根本简介主要介绍了如何建立页面、链接、导航和按钮。相关链接:15、设定页面的背景颜色.ui-pagebac

8、kground:4eee;backgroundcolorofapage这听起来可能很简单，但我花了好几分钟才弄清楚如何给页面添加背景颜色，又不会被jQueryMobileCSS所覆盖。通常你会给主体元素设定背景颜色，但如果你在使用jQueryMobile框架，就需要把它设成Ui-Page类。相关链接：16、jQueryMobile：我能为你做些什么？DOCTYPEhl*lPageTltlo一.linkrel,tscriptsrcfjueryMoUkzWbatCaaItDoforTou?可以弄清楚新的jQuenMobile框架如何帮你轻松构建外观出色、跨设备运行的Web应用程序。包括许多代码例如

9、和演示。可以学习创立一个简单的jQueryMobile应用程序。相关链接:17、禁止装入弹出式消息我觉得装入弹出式消息有点烦人，因为每当你装入不同的页面，该操作就会被触发。想禁止这个操作，只要往你的JS文件中添加下面这行代码。相关链接:18、如何使用jQueryMobile来创立RSS阅读程序TheEasiestWaytoCreateVerticalTextWnhCSS30.Water-InyzRSSHeaderwithjweryMobDe如今，我们会深入介绍使用PHP和jQuenMobile,创立一个简单的TUts+RSS阅读程序。创立完毕后，你只要点击一下按钮，并且运用构建web应用程序的

10、技能，就可以把这个简单工程添加到你的iPhone或Android手机上。相关链接：19、“Cancel”和“Save”按钮组合这段代码满足了两个根本要求。第一个要求是，让两个按钮彼此相邻。幸好，jQueryMobile库有一种内置的列结构，只要使用fieldset标签和适宜的类，很容易利用这种结构，如下所示。第二个要求是，让两个按钮有不同的主题。这段代码直接来自说明文档，我把它留在手边，以便经常使用。相关链接：20、使用jQuery锁定平台尽管我们很想为某些设备执行某些CSS语句，但我们也想只在特定的设备上运行jQuery。下面对来自SniPPIr的一些代码作了改动，那样我很容易把jQuery

11、的一局部隔离开来，以便根据用户的设备来运行。相关链接:21、创立自定义主题jQueryMobiIe框架随带五个主题：主题A、主题B、主题C、主题D和主题E。但是你很容易为自己的Web应用程序创立一个新主题。相关链接：22、阻止一些关键工程被截断库的一项特性（或者是缺点，就看你的需要了）在于，它能够智能化地截断很长的工程，以适应用户界面元素。在两种情况下这可能很烦人。首先在列表工程中，我更喜欢看到全部文本。其次是在脚注文本中。相关链接：23、两个iPhone开发技巧，jQuery出手相助第一个也是最简单的技巧是，使用视口。（你可能需要向苹果公司注册，才能查看该链接。需要登录才能访问简单的文档，对

12、苹果扣两分!）视口是一个简单的元标签。这是个例子：相关链接：24、从列表项移除箭头默认情况下，jQue:TyMObiIe框架在每个列表项旁边添加一个箭头。想禁用这项功能，只要针对你想移除箭头的那个列表项，将data-icon属性设成falseo相关链接：25、jQueryMobile表单验证AcmeCorporation*Email:*Password:buttonclass=Login(div可以通过这个教程学习jQueryMObiIe表单验证。相关链接：iOSAndroidCanvas linkrel三*stylesheet*href=whttp:/code.Jmobilel.a4.1/

13、scripttype三text/Javascriptusrc三http:/code.jquery.conjquery-1scripttype三wtext/javascript*src=*http:/code.jquery.coobilelS(function()varCanvasContext;resizeCanvas();S(window).resize(function()resizeCanvas();functionresizeCanvas()(varw=window.innerWidth/1.2;varhwindow.innerHeight/1.2;varCanvasStringtca

14、nvasid三,*mainCanvaswJidt=$(*#contentholder*).empty();S(CanvasString).appendTo(Wcontentholder*);CanvasContext=$(mainCanvas,).get().getContext($(mainCanvas*).bind(,tap,function(event)touchX=event.pageX;touchY三event.pageY;CanvasContext.fiIlStyle=*f;CanvasContext.fillRect(touchX-75,touchY-50CanvasContex

15、t.font=o2ptAriaIICanvasContext.fillText(X:touchXY:w)；JQUelyMobile支持众多的触摸事件，大大简化了开发人员的工作。实际上，JQUeryMObiIe确保你的Web应用程序在移动浏览器和台式机/笔记本电脑浏览器上都可以运行。遗憾的是，你根本无法预料JaVaSCriPt点击事件在移动设备上会如同在台式机/笔记本电脑浏览器上那样运行。相关链接:27、jQueryMObile触摸事件：快速按下可以学习如何检测智能手机设备上的“快速按下触摸事件。相关链接:28、使用带appMobi的JQueryMobile这个教学视频向你说明了如何使用带app

16、Mobi的流行JQueryJavaScript库的新移动版本。JQueryMobile让你可以很容易创立具有原生应用程序所有外观感觉的应用程序，拥有内置的按钮、转换效果和表单等。相关链接:29、同时禁用所有链接的AJAX导航功能PlaceitafterthereferencetotheJQUerymobilelibraryintheheaderofthepage,!notherwords,thelibrarymustalreadybeloadedbeforethiscodeisreferenced,$(document:).readyfunction()/disableojaxnav$.mob

17、ile.aJaxLinksEnabled=false;!)；scrlpttype三text3vascriptsxc4(docrnt).eady(function()(.stoblle.a3AxLlnksEnabled=false;n；尽管AJAX导航功能很出色，但有时候你完全想要禁用这项功能。使用这段jQuey代码，告诉移动库不要使用AJAX导航功能。相关链接：30、页面装入时，显示随机性的背景图像.j11y-pagebackground:transparenturl(isagesbg.Jpg)00no-repeat;).ay-page.blbackground:transparenturl(

18、/皿ges/bg-l.jpg)00no-repeat;).ny-page.bg2background:Cransparenrurl(./unages/bg-2.jpg)00no-repeat;.ny-page.bg3(background:transparenturl(./images/bg-3.jpg)00no-repeat;)Javascripti(.11y-page*).live(,pagecreate,rfunction()(varrandombg三Mah.floorMarh.randoa()*4);/0to3i(,.my-page,).removeClasaf).addClasa(b

19、g*Jrandozbg);n：jQueryMobile有许多页面初始化事件，你可以用来在页面装入时触发某些方法。以下CSS+JavaScript可以用来每当页面装入时，就显示随机性的背景图像。相关链接：31、创立只有图像、没有文本的按钮Home有时候，你可能不希望按钮有任何文本，但仍使用按钮元素随带的其余特性。主页按钮或信息按钮通常就是这种情况。想隐藏与按钮有关的任何文本,把data-iconpos属性设成“notext。比方：相关链接：32、jQueryMobile工具栏导航菜单可以学习如何使用jQueryMobile的工具栏和导航栏，创立固定位置菜单及更多内容！相关链接：33、jQuery

20、Mobile中的搜索列表我们很容易创立一个列表，该列表包括了搜索元素，用户通过该搜索元素，就可以开始输入文本，并获得适合该文本的从列表过滤出来的所有元素。相关链接：34、jQueryMobile：官方的jQueryMobile开发框架这个移动开发框架拥有众多优秀的功能特性，允许移动开发人员把一些专业级的jQuery效果添加到iOS、AndroidBlackBerrybadaWindowsMobilePalmOS、Symbiarl和MeeGo应用程序和Web应用程序中。你应该会在移动版Safari中看到这个坏小子。相关链接：35、不使用AJAX的页面转换效果就翻开链接Home想不使用AJAX的页

21、面转换效果就翻开链接（即以传统方式重新装入整个页面），把rel属性设成“external即可。相关链接:36、jQueryMobile多页内部链接这个简短的视频片段解释了内部链接在jQueryMobile中是如何工作的。相关链接：37jQueryMobile中的对话转换可以学习在jQueryMObile中显示对话时，如何设定转换。相关链接:38、为jQueryMobile网站添加驾驶方向可以学习如何为jQueryMobile网站添加驾驶方向。相关链接:39、jQueryMobile框架表单教程在这个教程中，我们将着重介绍jQueryMobile的一些根本元素：页面结构、表单和AjaX表单提交。

22、该教程基于jQueryMobile框架的版本LO测试版2。相关链接：40、jQueryMobile中的简单列表视图这个视频片段显示了如何创立iQueiyMobile中的简单列表视图。相关链接:41、jQueryMobile中的分割列表我们可以为每一个列表项添加辅助链接。它会连同工程右边局部的图标一起显示。相关链接：42、jQueryMobile中的表单控件这个简短的视频片段说明了使用JQueryMObile库时可用的控件。相关链接：43jQueryMobile中的标题和脚注固定位置这个简短的视频片段显示了为jQuerMobile中的标题和脚注设定固定位置具有的意义。相关链接：44、jQuery

23、Mobile内联按钮我们可以为按钮添加data-inline=true属性，就可以获得宽度不是屏幕整个宽度的按钮。这个视频片段显示了如何做到这一点。相关链接：45、jQueryMobile中的HeIlOWorld这个简短的视频片段解释了如何开发一个使用jQueryMObiIe库的简单网页。相关链接：46、使用jQueryMobile构建具有离线功能的移动网站CACHEMANIFEST*rev92HFrwoiuc屋“IBuildingaaOfflineCapableMobik可以学习如何使用jQueryMobile构建具有离线功能的移动网站。相关链接：47、jQueryMobile和JSON这个

24、教程介绍了可用于编写移动Web应用程序的jQue:ryMObiIe(JQM)框架，面向移动行业几款领先的浏览器。JQM可用于为在众多移动设备上运行的基于Web的应用程序提供直观而一致的用户体验，比方iPhone、iPad、AndroidWebOSBlackBerry版本6(Torch和Playbook)及其他移动设备。该教程先综述了JQM工程以及JQM与HTML5之间的关系。该教程介要介绍了构建JQM应用程序所用的多种方法中的一种,以及JQM改良根本Web用户界面元素的一些方式，最后介绍了根本的销售队伍自动化要求。相关链接：48、创立和使用jQueryMobile中的自定义图标本文将介绍如何创立和实施自定义图标。此外，我会介绍如何为iPhone4的视网膜屏幕及更新的高分辨率设备添加高分辨率图标支持。相关链接：WelcomeaboardYou,reridingRubyonRails!49、jQueryMobile&Rails3入门VOUraonlkfgynvlrr/NativeAndroidNewsReader可以学习如何使用jQueryMObile构建一个原生的Android新闻阅读应用程序。相关链接: