Blog

Flexibility at your fingertips: Meet jQuery Mobile

February 21st, 2012

As a developer in this day and age, a veritable cornucopia of tools are at your disposal for the creation and execution of any development projects you might have. However, these code/resource toolkits that are commonly used, despite their usefulness in streamlining your production process, can often be somewhat inflexible for custom solutions, or add complexity to a project when re-tooled to better fit your needs.

Not so with jQuery Mobile. The level of customization and freedom of control over the structure, look, feel, and function of this framework is exemplary. At an entry level, they offer easy GUI-enhanced theming, and a well organized default layout. For more advanced users, they provide a swath of functions that can be put together in almost any combination you can think of, rendered easy to learn due to their elegantly written syntax and custom object types.

First off, let’s take a look at how a basic page is set up.

As you can see, it’s incredibly simple. If you’re at all familiar with HTML, it’s just as easy as setting up your average index.html page. No custom scripts to set up, and no project builds to deal with, just out-of-the-box functionality.

The “data-role” tags used on your HTML elements are your key to populating your page with functional objects such as buttons, sliders, menus, new pages, forms, and much more! The ease of use of these tags is really where jQuery Mobile shines, as it’s plain-english terminology makes it crystal clear the purpose and function of each parameter.

Now that you’ve got a basic page set up, let’s check out some of the theming capabilities of this platform.

jQuery’s theme system is based on “swatches” (above seen an example of “Swatch A”) created in the CSS file, to allow for quick styling on elements or pages merely by changing the “data-theme=” declaration on that instance.

This ease of access to the core CSS structure of the platform is one of my favourite features of jQuery Mobile, as it allows literally unlimited customization, without compromising the ease of simply placing objects on your page and having them start working as intended without any undue fuss.

For an even more in-depth rundown of the capabilities of theming and developing on the jQuery Mobile platform, check out their extremely well written and organized documentation on the subject.

In summary, jQuery Mobile is certainly an invaluable tool to creating a functional mobile product tailor-made to your needs and specifications, with minimal effort and development time. If you’re about to embark on a web-based mobile project of your own, I would highly recommend starting here.