推荐jQuery Mobile插件和教程

本文涉及的jQuery Mobile 教程包括以下5 大方面的内容：

1. jQuery Mobile Swipe

2. jQuery Mobile Gallery(移动相册)

3. jQuery Mobile Menu(移动菜单)

4. jQuery Mobile Datepickers(日期选择)

5. jQuery Mobile Themes(主题/外观)

1. jQuery Mobile Swipe

1. How to Create a WordPress Theme in Photoshop

2. Swipe Gallery

3. WipeTouch, a jQuery plugin for touch devices

4. Another experiment in jQuery Mobile swipe navigation

5. jQswipe

6. Multiswipe

一个简单的插件用于激活Mobile Safari浏览器中的多点触摸Swipe事件。

2. jQuery Mobile Gallery

7. Awesome Mobile Image Gallery Web App

本教程将使用jQTouch jQuery插件来开发一个简单的移动相册。jQTouch这个jQuery插件为像iPhone, iPod Touch, G1, and Pre这样的移动浏览器提供了本地动画，自动导航和主题。

8. Touch Gallery

这个插件专门为运行在iPad或iPhone 4上的Mobile Safari浏览器而优化。它还可以运行在桌面浏览器之上如：Safari, Firefox 4, Opera和Chrome。

9. Photo Swipe

Image Gallery用于移动和触摸设备的相册

10. Mobile Photo Album JQuery plugin

Mobile Photo Album JQuery plugin is a easy to use JQuery plugin for web developer to build Javascript gallery for 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 Gallery

TN3 Gallery is a full fledged HTML based customizable image gallery with slideshow, transitions and multiple album options. Compatible with all modern desktop and mobile browsers. Powered by jQuery.

12. jQuery Mobile Gallery

For some time I was looking for jQuery Mobile gallery solutions and didn’t find much. So I made one. Just want to share my little experiment.

3. jQuery Mobile Menu

13. Select menus

The 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 as well.

14. jQueryMobile Toolsbars & Navigation Menu’s

In depth look at building jQuery Mobile header and footer menu’s. We also look at building navigation menu’s in the header and footer and creating iphone and android like fixed menu’s.

15. dualColumn

It adds a new data-role to the existing set. Just insert a

your menu

somewhere in the first page div and it’s 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 Jquery

17. iPhone 2 Template – Sliding Dhtml Menu (jQquery-iPhone-Horizontal-Slider)

18. Jquery Drop Bar

19. iPhone 6 Template – Code CSS Menu – (jQuery-Vertical-Menu-iPhone)

20. jQuery iPad Menu jQuery Menu

4. jQuery Mobile Datepickers

21. jQuery UI’s Datepicker Styled for mobile

The included files extend the jQuery UI datepicker to make it suitable for touch devices. This plugin is not included in jQuery Mobile by default, so you’ll need to include the files yourself if you’d like to use them. Scroll down for usage instructions.

22. Android-Like Date Picker with jQuery mobile .2

23. Sound System Studio Web Layout

In this tutorial you will learn how to create a nice looking layout.

5. jQuery Mobile Themes

24. Mobjectify – Easy Theming

25. jQuery Mobile – Mobile theme

Built 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 guarantee an optimal ease of reading on mobile devices such as the iPhone, Blackberries or Android.

26. Carrington Mobile

Carrington 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.

27. Custom jQueryMobile Themes

Want 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 order to customize it to your needs.

28. M?bius

Let us introduce our first free WordPress theme optimized for mobile devices. Features are listed below:

29. Smooci 2.1.0 WordPress Theme

Smooci is a WordPress theme for mobile phones and devices. Use this WordPress plugin to display the theme when your WordPress site is visited on mobiles

30. A Drupal jQuery Mobile theme (tutorial)

In an attempt to create a mobile Drupal iPhone app, I’m 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端的网页并不能完全自适应移动端页面需求，使得响应式设计体验产生并成为潮流，也正是这样一种需求，促成了jQuery Mobile的流行。jQuery Mobile 这样一款基于jQuery和jQuery UI的框架，继承了jQuery的“write less,do more”精髓，具有良好的扩展性和可定制性，全面兼容各种平台设备，对于不支持的手机类型，也会予以基础样式。

本文细数了15款非常优秀而又实用的jQuery Mobile插件，类型甚广，从日期/时间选择、即时声音通知、抽屉式导航菜单、iOS style、手风琴导航、隐藏/显示密码、灯箱特效，到颇为酷炫的交互式地图、页面震动、Native、相册/画廊展示等，总有那么一款会让你着迷。

1. Mobiscroll

对于许多开发者而言，Mobiscroll并不陌生，甚至可以说是相当熟悉。Mobiscroll是一款很不错的jQuery Mobile插件，主要用于触屏设备的旋转滚动/日期和时间选择。通过它，用户只需滑动数字即可进行日期和时间选择（点击链接查看Demo）。

Mobiscroll不仅支持任意自定义值，让用户完全自定义主题，还可用于下拉列表本地选择控制。此外，使用起来也是非常方便，不仅为开发者提供了相当高大上的配色方案，而且可完全通过CSS文件进行样式修改。支持包括iOS、Android、WP8、Windows 8、BlackBerry 等在内的所有主流移动及桌面浏览器。

2. Ion.Sound

今时今日，无论是Web还是移动网站，都充斥着各种各样的事件，比如新邮件、新聊天信息、内容更新等。但却常常存在着这样一个问题，就是即时通知无法立即引起用户注意。而通过Ion.Sound插件，则可以很好地实现这一任务。

Ion.Sound是一款用于播放事件声音的jQuery插件，采用MIT许可证，包含有25种免费声

音。截至目前，Ion.Sound已成功运用于Google Chrome、Mozilla Firefox、Opera、Safari、IE(9.0+)等桌面浏览器，并支持所有主流移动浏览器。

3. jQuery.mmenu

jQuery.mmenu是一款用于创建平滑的抽屉式导航菜单的jQuery插件，只需短短一行JavaScript代码，即可在移动网站中实现类似于移动App外观的非常酷炫的滑动菜单。

通过jQuery.mmenu，开发者可以将无序列表转换成菜单项，并进行自定义设置。jQuery.mmenu不仅为开发者提供了诸如打开、关闭、切换等常用菜单的定制，还提供了菜单位置（居左/居右）、是否显示菜单项计数器等选项的设置。

4. Naver

Naver是一款专门用于创建响应式导航的jQuery插件。通过它，开发者可以轻易地制作出对移动端非常友好的导航效果，还可制作动态导航。Naver兼容Firefox、Chrome、Safari、IE(7+)，基于MIT许可证发布，无论是个人或商业项目中，均可自由免费使用。

5. iosOverlay.js

iosOverlay.js是一款用于创建iOS风格的提示/通知效果的jQuery插件，支持IE7+、Google Chrome、Firefox、Opera、Safari（桌面版及移动版）。需要提醒的是，如果想要防止图标在加载时闪烁，开发者需要预加载图像资源。

此外，iosOverlay.js还存在两个可选的依赖项，即Spin.js和jQuery。如果开发者想使用其下拉列表对象，就必须要用到Spin.js，而对于不兼容CSS动画的浏览器，则需jQuery提供支持。

6. Easy Responsive Tabs

Easy Responsive Tabs是一款轻量级的响应式Tab选项卡/手风琴导航jQuery插件，支持

同一页面使用多个范例，跨平台支持Web、平板电脑及移动设备。该插件能够自适应屏幕大小，默认样式为水平/垂直Tab选项卡，随着窗口变小，会自动切换为手风琴样式。

7. Hide/Show Password

Hide/show Password插件可以让你轻易隐藏和显示密码输入框中的内容。该插件最酷的地方就是“innerToggle”选项。当设置为开时，开发者可以自定义创建非常漂亮的隐藏/显示控件。而且在触屏浏览器中进行滑动时还可保持输入焦点。

8. Swipebox

Swipebox是一款精美的jQuery灯箱特效插件，可用于桌面、移动和平板设备。在移动设备上，支持滑动手势导航，而在桌面上则可使用键盘导航。不支持CSS3过渡特性的浏览器可使用jQuery降级处理，支持视网膜显示，能够通过CSS轻松定制。

当用户点击目标图片时，照片将会以全尺寸的方式展示，此外，用户还可对同组的图片进行左右切换来进行查看，非常适合用于做照片画廊以及查看大尺寸图片。

9. App Folder

如果你是一名iOS狂热分子，那么对于iOS风格的文件夹一定非常熟悉。“点击文件夹，通过加深透明度将周围的元素虚化，然后显示文件夹中的内容。”App Folders正是这样一款能够实现iOS文件夹效果的jQuery插件。该插件可同时在桌面及移动浏览器上工作，适配性非常好。

App Folders的文件夹元素可包含任何HTML元素，比如图像、文本、视频等，并且每个文件夹都有专属于自己的URL实现直接点击。当然，开发者也无需拘泥于和iOS文件夹一样的效果，通过App Folders，开发者可以自定义出更富有创意的布局和特效。

10. jQuery Flip

jQuery Flip是一款能够让任意HTML、文本或jQuery元素产生非常漂亮的类似于Flipboard 的翻转效果的jQuery插件，基于MIT许可发布。使用CSS 3D转换，翻转速度也可进行设置，完全支持Chrome、Safari等WebKit浏览器以及Firefox 11。

11. jQuery UI Map

对于地图应用开发者而言，jQuery UI Map绝对是开发的必备利器。这样一款轻量级jQuery 插件，不同于Google Map API，通过jQuery UI Map，开发者不仅能在针对诸如点击等简单事件时使用Google事件监听器，而且还可在地图和标记上使用jQuery点击事件。

图：Demo

jQuery UI Map不仅非常灵活，而且高度可定制。要在地图上显示计划事件，jQuery UI Map 会集成Google地图，从而让开发者轻而易举地创建交互式地图。jQuery UI Map最大的特点就是，当客户端不支持JavaScript时，开发者可以在备用站点上使用微格式、RDFa或微数据等HTML数据格式实现同步。

12. gShake

gShake是一款能够实现震动效果的jQuery插件，只需短短几行代码，即可让导航、图片，甚至是页面本身抖动起来，从而让页面富有动感、乐趣，支持iOS 4.2+。

13. jQTouch

本文来源：https://www.bwwdw.com/article/e1he.html