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.
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 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.
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.
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.
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.
- 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 is a jQuery Mobile autocomplete plugin.AutoComplete is a jQuery Mobile plugin which allows developers to add autoComplete search boxes to your project.
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.