jQuery Mobile: Up and Running

Chapter 10. Extending the Framework

jQuery is well-known for its great plug-in community. jQuery Mobile is also a platform that can be extended easily though third-party plug-ins. An updated list of jQuery Mobile plug-ins to use can be found in http://mobilexweb.com/go/jqmplugin.

jQuery can be extended in many ways. We can create:

Themes

A CSS file and/or a couple of images

Plug-ins

A JavaScript and a CSS file that provides new widgets (data-role) to the framework

Extensions

A JavaScript file that adds new behavior to current jQuery Mobile widgets and/or core functionality

Creating a Plug-in

jQuery Mobile architecture is based on jQuery UI framework, so creating plug-ins for the mobile framework is similar to the UI framework.

First, we need to understand a few things to create compatible plug-ins:

• We should honor the compatibility from jQuery Mobile. Creating a plug-in that is only compatible with one or two platforms will not be useful for the community.

• To use the plug-in, the user should just add a script file and a CSS file.

• We should use data-* attributes as much as possible to continue the framework architecture.

• The plug-in should work properly with custom namespacing and the theming framework.

• The plug-in should auto-initialize widgets as in the main framework.

• Use semantic HTML5 as much as possible to define your plug-in’s contents.

• Use accessibility features (ARIA for example) if applicable.

• To avoid future framework incompatibilities, avoid using generic names for your own custom data-role ...