Best jQuery jQuery Mobile Plugins & Tutorials with Demo

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App

In this jQuery Mobile tutorial, we will create a nice demo app from scratch, to show some of the things that can be easily done using this powerful tool.We will create an application that will enable the user to choose a restaurant based on what they want to eat tonight, the town where they want to eat and other user’s ratings of the restaurants. The jQuery Mobile mini app we’re creating will be called “Restaurant Picker”.

Please note that this is only the front development, you will of course need a server and a database if you want to create a real app. Also note that jQuery Mobile uses Ajax navigation, so you’ll need to put the files either on a local server (xampp, mamp, etc) or on a real server to make the demo work properly.

jQuery Mobile Charts

jQuery Mobile Charts

Numeric data quickly becomes difficult for us humans to understand. Once the number of rows or columns in a table passes two or three, the meaning quickly becomes harder to grasp. The easiest way to give meaning to numeric data is to display it as a chart. Unfortunately jQuery Mobile doesn’t have any built-in charting capabilities and to the best of my knowledge there isn’t a jQuery Mobile charting plug-in available. But lucky for us, jQuery Mobile is built on top of jQuery and there are several charting plug-ins available for it.

jqmPhp : HTML Code Generator for jQuery Mobile Framework

jqmPhp : HTML Code Generator for jQuery Mobile Framework

jqmPhp is a package of PHP classes that facilitates the creation HTML files for use with jQuery Mobile Framework. All classes in the jqmPhp package can be converted to string and printed with an echo function.

Mobile navigation jquery plugin

Mobile navigation jquery plugin

Plugin to replace navigation with a dropdown for mobile devices.It’s simple as abc. If you have some kind of navigation that you want to replace with a dropdown for mobile devices (read: screenwidth less than 480 pixels) then you’ve found what you’re looking for.

jQuery Picture : Responsive images plugin

jQuery Picture : Responsive images plugin

jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

Mobile Navigation Design & Tutorial with jQuery

Mobile Navigation Design & Tutorial with jQuery

One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobile resolution. The navigation most likely ends up running into multiple lines or the buttons stacking on top each other. So I’m going to review some of the design solution and provide a quick tutorial on how to create a mobile navigation with jQuery.

jQuery Wiggle Plugin : A wiggle effect for mobiles

jQuery Wiggle Plugin : A wiggle effect for mobiles

The jQuery Wiggle is a jQuery plugin that allows you to emulate the wiggle effect icons on an iPhone have when you press and hold down on them. Click on the image in a demo to see the effect.

TouchTouch – A jQuery Touch Optimized Gallery Plugin with Demo

TouchTouch – A jQuery Touch Optimized Gallery Plugin with Demo

I want to share a little experiment with our readers – TouchTouch. It is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. It works on all major browsers (except for IE7 and below) and most importantly is specifically designed with iOS and Android in mind.
Highlights

  • Smooth CSS3 animations and transitions;
  • A responsive CSS interface that fills the screen and responds to changes in device orientation;
  • Preloads photos only when they are needed;
  • Supports swiping through photos;
  • Displays onscreen arrows and listens for arrow key presses on desktop browsers;

jQM Autocomplete in jQuery Mobile with Demo

jQM Autocomplete in jQuery with Demo

jQM is a  jQuery Mobile autocomplete plugin.AutoComplete is a jQuery Mobile plugin which allows developers to add autoComplete search boxes to your project.

Pep.jQuery.js : jQuery kinetic-drag on mobile/desktop plugin with Demo

Pep.jQuery.js : jQuery kinetic-drag on mobile/desktop plugin with Demo

Pep was built out of a need for kinetic drag support for both mobile and desktop devices (click & drag). It uses the best of jQuery’s animate functions along with CSS3 animations to bring full-blown kinetic drag that works on all HTML5-ready devices.

Pep has built-in support for custom start, stop, rest (called when easing completes), and drag events, constraining objects to either their parent or the window, a debugger, and the ability to customize your own kinetic easing functions.