软件工程师-经典收藏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/ scripttype三text/Javascriptusrc三http:/code.jquery.conjquery-1scripttype三wtext/javascript*src=*http:/code.jquery.coobilelS(function()varCanvasContext;resizeCanvas();S(window).resize(function()res