How to Develop jQuery UI Widgets. I'm wrapping up my first jQuery UI widget (see multiselect on GitHub) and thought it would be useful to share some notes I took on the widget factory & widget development in general.
I personally found development on the factory to be quite enjoyable; a lot of functionality is available right out the box (custom events, ability to change options after initialization) and idioms you might not otherwise consider, like widget destruction. Furthermore, it imposes a clean object-literal development structure with public and private methods, making it much easier to start a project or maintain other's projects. Throughout this blog post I will be showing you various ways to modify the jQuery UI dialog widget source to add your own features. I do not actually recommend doing this however, because widgets can just as easily be extended. The concepts are the same though and are easily adaptable to your own project. _init() and _create() So how do you know where to place which logic? _trigger. Hacking at 0300 : Understanding jQuery UI widgets: A tutorial. Last modified May 31, 2012.
Updated for jQuery 1.8 This was written largely to help me make sense of using UI to create my own widgets, but I hope it may help others. "Widget" to me means a user-interface element, like a button or something more complicated like a popup date picker, but in jQuery UI terms it means a class, members of which are associated with HTML elements; things like Draggable and Sortable. In fact, not everything that I would have called a widget uses $.widget; the UI datepicker does not. Dan Wellman has another tutorial that you may find helpful. Modifying Elements: Plugins That being as it may, let's use $.widget. Let's take a paragraph of class target: <p class="target">This is a paragraph</p> This is a paragraph Now, make it more general-purpose: a plugin: Keeping State in Plugins But this pollutes the $.fn namespace terribly, with off, darker and lighter.
The Problems with Associating an Object with a Plugin Solving the Problem: $.widget That's where $.widget comes in. Widget factory. All of jQuery UI's widgets and interactions are built from a simple, reusable base - the jQuery UI Widget Factory.
It provides a flexible base for building complex, stateful plugins with a consistent API. It is designed not only for plugins that are part of jQuery UI, but for general consumption by developers who want to create object-oriented components without reinventing common infrastructure. It does not have any dependencies on the rest of jQuery UI, but most of jQuery UI is dependent on it. Other Resources.