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 docu- mentation. 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 factory will enable garbage collection to avoid memory leaks in browsers. For example, consider the jQuery UI Accordion widget, which is a favorite of mine. To create an accordion, you write your markup and then apply the jQuery.accordion() method to it. During the initialization process, the accordion widget enhances the markup, creates events that you can bind to, and exposes methods you can use to interact with and modify the resulting accordion. 25