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.

  • Auto initialization - to add your plugin to a jQuery Mobile page, it should be as easy as including the JS plugin file and the structural CSS file to the head of the page and it should "just work". To make auto initialization possible, bind to both pagecreate and create events and call your plugin on markup that matches the markup convention of data-role attribute you're using to enhance the widget by registering the initSelector option.

  • 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. Apply the stackable [http://jquerymobile.com/test/docs/api/themes.html](theme framework) classes to apply the theme to your widget. 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.

  • Semantics - use HTML5 markup for better semantics and native markup-driven ways of setting configuration data. For example, to build a progress bar widget, use the HTML5 progress element: http://www.w3.org/TR/html-markup/progress.html. Then your plugin can look for this element on a page and parse out the attributes to configure itself. In this case, you can set the max and current values using native attributes and add data- attributes for the others. In some cases, you may want to hide the original element if it's replaced by a new widget that uses custom markup.

  • Accessibility - always test to ensure that the widget incorporates accessibility features like ARIA attributes and is tested on screen readers like VoiceOver on iOS.

Clone this wiki locally