10 life saving jQuery Mobile plugins

Written by on March 24, 2015

10 life saving jQuery Mobile plugins

As time goes by jQuery Mobile is becoming more and more popular, at the same time our needs have grown even further. To remedy this, just like its older brother jQuery Mobile is open to 3rd party development and last three years have so a lot of jQuery Mobile plugins growing to a full maturity.

Every plugin here is tested with jQuery Mobile 1.2 up to jQuery Mobile 1.3.2. At this point, I can’t confirm that plugins mentioned here will work with jQuery Mobile 1.4 as it is still in an unstable alpha state.

Here’s the list of 10 life-saving jQuery Mobile plugins, I will try to group them according to their functionality.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Official Page
Demo
Download

A wheel scroller user control optimized for touchscreens to easily enter date and/or time. The control can easily be customized to support any custom values and can even be used as an intuitive alternative to the native select control (drop-down list). It is designed to be used on touch devices as an alternative to the jQuery UI date picker.

This is an extremely beautiful plugin. It can mimic any major mobile platform so if you want you can use an Android 4.x like datepicker or easily change it to an iOS looking date picker. It can go even further, just take a look at this developer demo page. Unfortunately, this plugin will cost you …. a lot.

Working jsFiddle example

Official Page
Demo
GitHub

Mobi Pick is an Android-style datepicker widget for jQuery Mobile. It uses the date library XDate and allows progressive enhancement for date input fields using Modernizr. It is free, fast and unobtrusive. The only downside to this plugin is its lack of skins, basically it has only one of them.

Working jsFiddle example

Click on an input box if you want to see a date picker.

Official Page
Download

DateBox is a jQueryMobile plugin that aims to make user interaction with dates and times simple and intuitive. It is a collaborative work, with a full range of features allowing easy implementation and painless extensibility.

This one is my favorite date picker. It has a simpler interface than Mobiscroll or Mobipick but at the same time it is insanely configurable.

Working jsFiddle example

Click on an input box calendar icon if you want to see a date picker.

Official Page
Demo
GitHub

Inspired by the iOS photo viewer and Google images for mobile, PhotoSwipe is an HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.The current version supports mobile handsets running WebKit-based browsers, i.e. iOS, Android and Blackberry 6. PhotoSwipe also runs on the desktop and has been tested on Chrome, Firefox, Safari and Internet Explorer 8 and above and in a limited capacity on Windows Phone 7 (Mango).

Working jsFiddle example

Click on an example (and scroll to the bottom of a jsFiddle example) if you want to see a pagination menu bar.

Official Page
Demo
GitHub

The Pagination plugin creates touch-drag navigation between separate HTML pages. Simply add this plugin to your page and link together documents via ordinary HTML anchors. The linked pages will pre-fetch, and in browsers that support touch events, you’ll be able to drag between the linked pages, while desktop users can navigate with mouse or keyboard. Like all navigation in jQuery Mobile, this plugin ties into your browser’s history, so bookmarking, and using the browser’s back and forward buttons work as expected!

This is an excellent plugin if you for some reason need a pagination. Just be careful when using this plugin on mobile devices as its memory usage can literally kill your mobile app.

Unfortunately, I can’t provide an example here, jsFiddle simply can’t work with multiple HTML files, which is a prerequisite for this plugin.

Continue Reading

Categories

6 thoughts on “10 life saving jQuery Mobile plugins”

  1. do you have reference to any good tutorial on creating mobile apps with jqm with local data on the device? like a a data folder on the users device whr the app loads the app pages from

  2. I quite like looking through a post that will make people think.

    Also, thanks for allowing for me to comment!

Leave a Reply