推荐jQueryMobile插件和教程.docx

《推荐jQueryMobile插件和教程.docx》由会员分享，可在线阅读，更多相关《推荐jQueryMobile插件和教程.docx（29页珍藏版）》请在三一办公上搜索。

1、本文涉及的 jQuery Mobile 教程包括以下 5 大方面的内容：1. jQuery Mobile Swipe2. jQuery Mobile Gallery(移动相册)3. jQuery Mobile Menu(移动菜单)4. jQuery Mobile Datepickers(日期选择)5. jQuery Mobile Themes(主题/外观)1. jQuery Mobile Swipe1. How to Create a WordPress Theme in Photoshop2. Swipe Gallery3. WipeTouch, a jQuery plugin for to

2、uch devices4. Another experiment in jQuery Mobile swipe navigation5. jQswipe6. Multiswipe一个简单的插件用于激活 Mobile Safari浏览器中的多点触摸Swipe事件。2. jQuery Mobile Gallery7. Awesome Mobile Image Gallery Web App本教程将使用jQTouch jQuery插件来开发一个简单的移动相册。jQTouch这个jQuery插件为像iPhone, iPod Touch, G1, and Pre这样的移动浏览器提供了本地动画，自动导航和

3、主题。8. Touch Gallery这个插件专门为运行在iPad或iPhone 4上的Mobile Safari浏览器而优化。它还可以运行在桌面浏览器之上如：Safari, Firefox 4, Opera和 Chrome。9. Photo SwipeImage Gallery用于移动和触摸设备的相册10. Mobile Photo Album JQuery pluginMobile Photo Album JQuery plugin is a easy to use JQuery plugin for web developer to build Javascript gallery fo

4、r mobile device. The plugin is driven by xml or array data. Easy setup and only minimum programming knowledge is needed. Best for building photo album which target for view on mobile device.11. TN3 GalleryTN3 Gallery is a full fledged HTML based customizable image gallery with slideshow, transitions

5、 and multiple album options. Compatible with all modern desktop and mobile browsers. Powered by jQuery. 12. jQuery Mobile GalleryFor some time I was looking for jQuery Mobile gallery solutions and didnt find much. So I made one. Just want to share my little experiment.3. jQuery Mobile Menu13. Select

6、 menusThe select menus are driven off native select elements, but the native selects are hidden from view and replaced with a custom-styled select button that matches the look and feel of the jQuery Mobile framework. The replacement selects are ARIA-enabled and are keyboard accessible on the desktop

7、 as well.14. jQueryMobile Toolsbars & Navigation MenusIn depth look at building jQuery Mobile header and footer menus. We also look at building navigation menus in the header and footer and creating iphone and android like fixed menus.15. dualColumnIt adds a new data-role to the existing set. Just i

8、nsert ayour menusomewhere in the first page div and its ready. All links are loaded as usual. If the screen on the device is too small to be used with two columns nothing happens. Site works as it would work without the plugin.16. Horizontal Menu Drop Jquery17. iPhone 2 Template Sliding Dhtml Menu (

9、jQquery-iPhone-Horizontal-Slider)18. Jquery Drop Bar19. iPhone 6 Template Code CSS Menu (jQuery-Vertical-Menu-iPhone)20. jQuery iPad Menu jQuery Menu4. jQuery Mobile Datepickers21. jQuery UIs Datepicker Styled for mobileThe included files extend the jQuery UI datepicker to make it suitable for touch

10、 devices. This plugin is not included in jQuery Mobile by default, so youll need to include the files yourself if youd like to use them. Scroll down for usage instructions.22. Android-Like Date Picker with jQuery mobile .223. Sound System Studio Web LayoutIn this tutorial you will learn how to creat

11、e a nice looking layout.5. jQuery Mobile Themes24. Mobjectify Easy Theming25. jQuery Mobile Mobile themeBuilt with the incredible jQuery Mobile plugin, this theme is perfect for those who want to make a good looking and easy to read version of their blog. It uses most of jQuery Mobile features to gu

12、arantee an optimal ease of reading on mobile devices such as the iPhone, Blackberries or Android.26. Carrington MobileCarrington Mobile is an elegant mobile theme with that supports advanced touch browsers (iPhone, Android, BlackBerry, Pre) and is also backward compatible with older mobile devices.2

13、7. Custom jQueryMobile ThemesWant to stand out from the crowd? Then, you might be wondering how to create your own custom jQuery Mobile theme. Well, this screencast will teach you how to do exactly that. You will learn how to edit a default jQuery Mobile theme and add your css and theme changes in o

14、rder to customize it to your needs.28. MbiusLet us introduce our first free WordPress theme optimized for mobile devices. Features are listed below:29. Smooci 2.1.0 WordPress ThemeSmooci is a WordPress theme for mobile phones and devices. Use this WordPress plugin to display the theme when your Word

15、Press site is visited on mobiles30. A Drupal jQuery Mobile theme (tutorial)In an attempt to create a mobile Drupal iPhone app, Im currently writing a Drupal mobile app using jQuery Mobile, and although I still have a few kinks to work out, the basics are now working.移动互联网的发展，来自PC端的网页并不能完全自适应移动端页面需求，

16、使得响应式设计体验产生并成为潮流，也正是这样一种需求，促成了jQuery Mobile的流行。jQuery Mobile这样一款基于jQuery和jQuery UI的框架，继承了jQuery的“write less,do more”精髓，具有良好的扩展性和可定制性，全面兼容各种平台设备，对于不支持的手机类型，也会予以基础样式。本文细数了15款非常优秀而又实用的jQuery Mobile插件，类型甚广，从日期/时间选择、即时声音通知、抽屉式导航菜单、iOS style、手风琴导航、隐藏/显示密码、灯箱特效，到颇为酷炫的交互式地图、页面震动、Native、相册/画廊展示等，总有那么一款会让你着迷。

17、1. Mobiscroll对于许多开发者而言，Mobiscroll并不陌生，甚至可以说是相当熟悉。Mobiscroll是一款很不错的jQuery Mobile插件，主要用于触屏设备的旋转滚动/日期和时间选择。通过它，用户只需滑动数字即可进行日期和时间选择（点击链接查看Demo）。Mobiscroll不仅支持任意自定义值，让用户完全自定义主题，还可用于下拉列表本地选择控制。此外，使用起来也是非常方便，不仅为开发者提供了相当高大上的配色方案，而且可完全通过CSS文件进行样式修改。支持包括iOS、Android、WP8、Windows 8、BlackBerry等在内的所有主流移动及桌面浏览器。2.

18、Ion.Sound今时今日，无论是Web还是移动网站，都充斥着各种各样的事件，比如新邮件、新聊天信息、内容更新等。但却常常存在着这样一个问题，就是即时通知无法立即引起用户注意。而通过Ion.Sound插件，则可以很好地实现这一任务。Ion.Sound是一款用于播放事件声音的jQuery插件，采用MIT许可证，包含有25种免费声音。截至目前，Ion.Sound已成功运用于Google Chrome、Mozilla Firefox、Opera、Safari、IE(9.0+)等桌面浏览器，并支持所有主流移动浏览器。3. jQuery.mmenujQuery.mmenu是一款用于创建平滑的抽屉式导航菜

19、单的jQuery插件，只需短短一行JavaScript代码，即可在移动网站中实现类似于移动App外观的非常酷炫的滑动菜单。通过jQuery.mmenu，开发者可以将无序列表转换成菜单项，并进行自定义设置。jQuery.mmenu不仅为开发者提供了诸如打开、关闭、切换等常用菜单的定制，还提供了菜单位置（居左/居右）、是否显示菜单项计数器等选项的设置。4. NaverNaver是一款专门用于创建响应式导航的jQuery插件。通过它，开发者可以轻易地制作出对移动端非常友好的导航效果，还可制作动态导航。Naver兼容Firefox、Chrome、Safari、IE(7+)，基于MIT许可证发布，无论是

20、个人或商业项目中，均可自由免费使用。5. iosOverlay.jsiosOverlay.js是一款用于创建iOS风格的提示/通知效果的jQuery插件，支持IE7+、Google Chrome、Firefox、Opera、Safari（桌面版及移动版）。需要提醒的是，如果想要防止图标在加载时闪烁，开发者需要预加载图像资源。此外，iosOverlay.js还存在两个可选的依赖项，即Spin.js和jQuery。如果开发者想使用其下拉列表对象，就必须要用到Spin.js，而对于不兼容CSS动画的浏览器，则需jQuery提供支持。6. Easy Responsive TabsEasy Respon

21、sive Tabs是一款轻量级的响应式Tab选项卡/手风琴导航jQuery插件，支持同一页面使用多个范例，跨平台支持Web、平板电脑及移动设备。该插件能够自适应屏幕大小，默认样式为水平/垂直Tab选项卡，随着窗口变小，会自动切换为手风琴样式。7. Hide/Show PasswordHide/show Password插件可以让你轻易隐藏和显示密码输入框中的内容。该插件最酷的地方就是“innerToggle”选项。当设置为开时，开发者可以自定义创建非常漂亮的隐藏/显示控件。而且在触屏浏览器中进行滑动时还可保持输入焦点。8. SwipeboxSwipebox是一款精美的jQuery灯箱特效插件，

22、可用于桌面、移动和平板设备。在移动设备上，支持滑动手势导航，而在桌面上则可使用键盘导航。不支持CSS3过渡特性的浏览器可使用jQuery降级处理，支持视网膜显示，能够通过CSS轻松定制。当用户点击目标图片时，照片将会以全尺寸的方式展示，此外，用户还可对同组的图片进行左右切换来进行查看，非常适合用于做照片画廊以及查看大尺寸图片。9. App Folder如果你是一名iOS狂热分子，那么对于iOS风格的文件夹一定非常熟悉。“点击文件夹，通过加深透明度将周围的元素虚化，然后显示文件夹中的内容。”App Folders正是这样一款能够实现iOS文件夹效果的jQuery插件。该插件可同时在桌面及移动浏览

23、器上工作，适配性非常好。App Folders的文件夹元素可包含任何HTML元素，比如图像、文本、视频等，并且每个文件夹都有专属于自己的URL实现直接点击。当然，开发者也无需拘泥于和iOS文件夹一样的效果，通过App Folders，开发者可以自定义出更富有创意的布局和特效。10. jQuery FlipjQuery Flip是一款能够让任意HTML、文本或jQuery元素产生非常漂亮的类似于Flipboard的翻转效果的jQuery插件，基于MIT许可发布。使用CSS 3D转换，翻转速度也可进行设置，完全支持Chrome、Safari等WebKit浏览器以及Firefox 11。11. jQ

24、uery UI Map对于地图应用开发者而言，jQuery UI Map绝对是开发的必备利器。这样一款轻量级jQuery插件，不同于Google Map API，通过jQuery UI Map，开发者不仅能在针对诸如点击等简单事件时使用Google事件监听器，而且还可在地图和标记上使用jQuery点击事件。图：DemojQuery UI Map不仅非常灵活，而且高度可定制。要在地图上显示计划事件，jQuery UI Map会集成Google地图，从而让开发者轻而易举地创建交互式地图。jQuery UI Map最大的特点就是，当客户端不支持JavaScript时，开发者可以在备用站点上使用微格式

25、、RDFa或微数据等HTML数据格式实现同步。12. gShakegShake是一款能够实现震动效果的jQuery插件，只需短短几行代码，即可让导航、图片，甚至是页面本身抖动起来，从而让页面富有动感、乐趣，支持iOS 4.2+。13. jQTouch相比本文所介绍的许多可用于移动开发的jQuery插件，jQTouch显然要更有知名度。通过jQTouch，开发者仅仅使用HTML、CSS以及jQuery即可创建出非常强大的移动App，更牛叉的是，开发者只需使用核心CSS文件，即可构建一个完全自定义的UI。jQTouch可以在移动设备的WebKit浏览器上实现诸如动画、列表导航、默认样式等常见UI效

26、果，但要想实现更多原生效果，则需额外添加CSS文件。对于iOS开发者，这点则无需顾虑，因为jQTouch为iOS开发提供了相当丰富的原生效果CSS文件。14. PhotoSwipePhotoSwipe是一个开源且免费的专为移动触屏设备设计的相册/画廊展示包，兼容iOS、Android、Blackberry等主流平台及桌面浏览器。其底层实现基于HTML、CSS及JavaScript，不依赖任何框架，非常适合想要让移动站点的相册体验和原生App一样的设计师和开发者。PhotoSwipe是一个独立的JavaScript库，很容易集成到移动网站中，并对移动浏览器进行了大量的优化。此外，在源码中，Pho

27、toSwipe还提供了对桌面浏览器及使用jQuery Mobile的支持。15. Touch Gallery和PhotoSwipe一样，Touch Gallery也是一款图片展示插件，通过它，开发者可以在移动浏览器上实现类似于原生相册应用的图像展示效果。支持手势浏览操作，也可运用于桌面版Safari、Firefox、Opera及Chrome等桌面浏览器，但某些功能项无法实现。jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。jQuery Mobile

28、 是 jQuery 的移动手机插件，而这里介绍的 10 个 jQuery Mobile 的插件，也就是 jQuery 的插件的插件。1) Drag And Scale For IOS2) jQuery Mobile Photo Album3) Jquery Mobile Device Drag And Drop4) Jquery Swipe5) jQuery Mobile with Google Map6) Photoswipe7) keep Reading8 ) jQuery Mobile Datebox9) Advanced Browser Check 10) jQuery Mobile ActionSheet