The latest release of jQuery mobile is 1.3.1 and it contains close to 50 enhancements. With the addition of source maps (the flagship new feature) jQuery mobile gives users the ability to view uncompressed code from its minified version. Reflow and column toggle tables now have refresh methods. If you’d like to read the official jQuery post regarding the release and each added update check here: jQuery Mobile Release Information
If you are completely new to jQuery mobile you may not know that it is a touch optimized JavaScript framework for smart phones and touch devices.
Since the inception of the smartphone developers have been hacking together websites and native apps to engage customers and users. jQuery’s mobile framework aims to avoid the redundancy of creating applications for separate devices. Instead it provides a foothold for developing and designing a uniquely branded mobile site or application. This application will work cross-platform on tablets, smartphones, and desktop platforms.
On top of its cross compatibility, user-friendliness, and sheer beauty jQuery mobile has drag and drop builders to craft a definitive UI. Codiqa the drag and drop site builder for jQuery mobile can be found here: Codiqa Mobile Builder. Codiqa claims to “unlock your mobile super powers”. Codiqa isn’t the end when it comes to tools built to streamline the mobile development process. jQuery’s own Themeroller is an excellent tool to craft, and unify your UI experience. If you are a developer worried about function jQuery boasts a Mobile Download Builder which can build your custom bundle to develop a blazing fast build of jQuery with only the code you need.
I was surprised when I looked through the example inspiration gallery at jquerymobile.com. Names like Stanford, Ikea, Khan Academy, and Disney World all have applications built on this platform.
Not only does jQuery mobile have some serious tools to aid in your development process but it also contains some of the most widely used and recognized touch gestures today. The API contains Events, Methods and Widgets that allow you to build yourself a mobile web application that runs much like a native application would. Some of the most notable events include: onorientationchange, pagechange, swipe, taphold, throttledresize, and hashchange. For me the widgets were my favorite part of the build. With jQuery mobile the widgets allow you to get that app functionality right out of the box with minimal coding. Here are a couple of my favorite widgets:
optimized

  • Slider Widget: Create beautiful mobile, touch friendly sliders in your applications
  • Navbar widget: Create mobile, user friendly menus that are optimized for touch
  • Reflow table widget: Tables on smaller devices become smashed and hard to follow. Reflow redirects the ordering of your table to allow the data to be visually appealing
  • Dialog Widget: Want to open your data in a beautiful on screen overlay. Use the dialog to make nice popup logic inside of your web app

Although jQuery mobile allows you to dive right in to mobile development there are a few things to keep in mind when selecting the framework.

  • Close to all of the major smartphone and tablet platforms do support the full enhanced experience with AJAX-based animations
  • Blackberry 5.0, IE7, and Nokia Symbian do not support AJAX Navigation features
  • IE6, iOS3-, Blackberry 4.x, and Windows Mobile only support basic non-enhanced HTML experience, which does degrade gracefully.

You can find a full list of device support here: Device Support For jQuery Mobile
Now that we have got the boring stuff out of the way lets talk about the whole idea of getting started with jQuery Mobile. To begin you can download the bundle of CSS, and JavaScript Here:
Download jQuery Mobile Bundle
This file will come with demos, images; all of your CSS and JavaScript as well as your beginning index.html file which you will want to get started.
Since jQuery mobile is using AJAX to build and navigate you will need to be running its files from a web server. In my case I always begin development on a test environment using MAMP on Mac OSX. If you are using a PC you can download WAMP or XAMPP from Apachefriends.org
Here are your first steps (covered in the video):

  • Download the bundle from the link above
  • Install MAMP for MacOSX or XAMPP on PC
  • Move the jQuery Install to your htdocs(PC) Sites(MAC) folder(s)
  • Navigate to your localhost in the web browser. In my case: http://localhost:8888/jquery.mobile-1.3.1
  • Click through and read the documentation

Video walkthrough of the first steps

Getting Started With jQuery Mobile Part 1 from Myriad Core on Vimeo.

Stay tuned for part 2 where we will begin to work with the demo files and start our first app with jQuery Mobile.