Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Creating jQuery Mobile Plugins

Jump to bottom
toddparker edited this page Nov 9, 2011 · 4 revisions

We encourage developers to create a rich ecosystem of 3rd party plugins to enhance the capabilities of the framework. All the UI widgets in jQuery Mobile are decoupled from the library so they are built just like any 3rd party plugin so review the code for a plugin to see how it all comes together.

Here are a few important things to include:

  • Widget factory - all the internal widgets use the jQuery UI [http://wiki.jqueryui.com/w/page/12138135/Widget%20factory](widget factory) and it provides a clear template for organizing your code and automatically does things like exposing all options as data attributes so they are consistent with the rest of the library.

  • Theme framework - follow how our plugins work where they have structural styles that don't ever set bg colors, font colors, etc. so the theme will flow through. In your widget, have it inherit the swatch from the parent if not set as a data attribute. Test your widgets with both the default and custom themes to ensure they are properly themable.

  • Use semantics to drive your widget - if possible, use HTML5 markup for better semantics and native ways of setting configuration data. For example, to build a progress bar widget, use the new progress element here: http://www.w3.org/TR/html-markup/progress.html. You can set the max and current values using native attributes and add data- attributes for the others.

Clone this wiki locally