10 Awesome jQuery Mobile Plugins

Looking for some new crazy awesome jQuery Mobile plugins to spice up your UI?  Here are 10 crazy cool "optimized for mobile websites" that allow you to perform features such as mobile swipe touch, mobile device detection, mobile browser check, mobile image galleries, mobile drag n drop, mobile touch scroll, mobile ajax calls, mobile css tweaks and more!

Before you get started, most of the below are intergtated into jQuery Mobile, so check it out!

1. jQuery SwipeGallery

Optimized for mobile websites and supports swipe gestures. It is lightweight plugin, which allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images.

2. Touch Punch (Drag and Scale) for iOS

The dragNscale plugin makes selected elements draggable,scalable,rotatable by touching and pinching on mobile platform.

3. Touch Scroll – Enable Inline Scrollable Sontent on iOS Sevices

jQuery plugin that provides a way to have inline scrollable content. It mimics the behavior of scrolling on iOS devices (iPhone, iPod touch and iPad) to solve the problem that “position: fixed;” does not work in mobile Safari. This plugin will only work for vertical-scrolling content. It has been designed this way to be lightweight and efficient for this purpose only.

4. Keep Reading

The ‘Keep Reading’ plugin can be used to display a small tag in the lower right portion of a screen when the page contains content below the fold. This is very useful for mobile browsers where you may desire a long form on one page in order to cut down on network trips. The tag will alert users that they need to scroll to view additional content. Once the user scrolls the page, the ‘more content’ tag is animated out of view.

5. Really Simple Browser Detection with jQuery

Check This plugin makes a full browser check (iPhone, iPad, iPod/mobile device/touch device support/operating system, browser name and version/ plugin and ActiveX check/HTML5 support/CSS3 support)

6. jQuery Canvas Loader

Uses the canvas element to create an alternative to the typical ajax loading images. Can be used to replace an existing image or you can create a custom one that will take the place of any element on your page. This plugin is useful in browsers that do not support animated gifs such as WebKit for Android. Warning: this plugin has not been tested in many browsers, but it does work on Mobile Safari and Android browsers.

7. jQuery Mobile Draggable

Drag And Drop The idea behind this project is to create an example of drag and drop that works on normal desktop browsers, but also supports mobile devices . This project aims to devise a drag and drop style interface with mobile device support. To be precise, most mobile devices “hijack” the action of dragging on the web browser in order to provide scrolling functionality, leaving your drag and drop items sat statically on the page.

8. Bottomless

Bottomless is an infinite scroll plugin that has been torture-tested by naive users with old versions of IE, which is important because permanently replacing pagination with infinite scroll on a public facing site is a high risk, high benefit proposition. jquery-bottomless has a sweet and simple API.

9. jQuery iPhone Swipe Gestures

iPhone and iPod Touch swipe gesture support using Safari JavaScript for onTouchStart, onTouchMove, onTouchEnd and onTouchCancel. This plugin uses Mobile Safari’s built in touch events to allow jQuery binding of swipe events to any DOM element. You can override the swipeLeft and swipeRight defaults functions to create your own custom process when the gesture is detected.

10. jGestures

A jQuery plugin that enables you to add gesture events such as 'pinch', 'rotate', 'swipe', 'tap' and 'orientationchange' just like native jQuery events. Includes event substitution: a "tapone" event can be triggered by "clicking", a "swipe" by performing a swipe-ish mousegesture.

So there you have it, enjoy!  Oh and feel free to share your own favorite plugins in the comments below.