jQuery Mobile

Chapter 3. Page Elements

Like jQuery UI, jQuery Mobile has many different UI elements. Many of these are based on common mobile UI elements, and are created in the standard jQuery Mobile way: you write semantic markup and then apply a data attribute to the element, and jQuery Mobile enhances the element upon initialization.

Under The Hood: jQuery Plug-ins and Widgets

jQuery Mobile makes extensive use of two standard jQuery development patterns: the plug-in and the widget.

The jQuery plug-in pattern is a way of extending jQuery itself, enabling you to add custom methods. You can then call your custom method just like you would any other jQuery method. The jQuery plug-in pattern is discussed in detail in the jQuery documentation. If you’re not familiar with the jQuery plug-in pattern, I highly recommend you read about it and adopt it whenever it is appropriate. I use the jQuery plug-in pattern on a daily basis in my development tasks, and in the context of a jQuery Mobile application, it provides a handy way of encapsulating application and page initialization functions and data managers.

The jQuery widget pattern is slightly more complicated than the jQuery plug-in pattern, but it is also more powerful. A jQuery widget is created using the jQuery.widget factory, and like a plug-in, it results in a jQuery method that can be called on any selector. One of the main benefits of using the widget factory is that it can maintain state even after the resulting method is done executing, and the ...