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 What is it? The widget factory is a simple function on the global jQuery object - jQuery.widget - that accepts 2 or 3 arguments. jQuery.widget( "namespace.widgetname", /* optional - an existing widget prototype to inherit from */, /* An object literal to become the widget's prototype*/ {...} ); The first argument to the widget factory is a string containing a namespace and the widget name, separated by a dot.
The second (optional) argument is a widget prototype to inherit from. 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. Script Junkie | Introduction to Stateful Plugins and the Widget Factory. The jQuery UI Widget Factory is a separate component of the jQuery UI Library that provides an easy, object oriented way to create stateful jQuery plugins. Plugins created using the Widget Factory can be simple or very robust as evidenced by the official jQuery UI widgets, each of which are built on top of the Widget Factory. This article will first look briefly at why you might want to use the Widget Factory, then present an in depth walkthrough of creating a stateful plugin using the Factory.
What is a stateful plugin? A stateful plugin is an advanced type of jQuery plugin that is self-aware — it maintains its own state, and often provides an external interface for outside code to interact with and alter the plugins state. Stateful plugins, or widgets as they are often called, often trigger events and provide callback hooks into important parts of their functionality. Why use jQuery UI Widget Factory? Are they jQuery UI Widgets or jQuery Plugins? A Countdown Timer The Markup That’s it! jQuery plugin patterns: something more object-oriented.
Widget Factory. Description: Create stateful jQuery plugins using the same abstraction as all jQuery UI widgets. You can create new widgets from scratch, using just the $.Widget object as a base to inherit from, or you can explicitly inherit from existing jQuery UI or third-party widgets. Defining a widget with the same name as you inherit from even allows you to extend widgets in place. jQuery UI contains many widgets that maintain state and therefore have a slightly different usage pattern than typical jQuery plugins.
All of jQuery UI's widgets use the same patterns, which is defined by the widget factory. So if you learn how to use one widget, then you'll know how to use all of them. Looking for tutorials about the widget factory? Note: This documentation shows examples using the progressbar widget but the syntax is the same for every widget. Initialization In order to track the state of the widget, we must introduce a full life cycle for the widget. Options You can pass multiple options arguments. Tips for Developing jQuery UI 1.8 Widgets - Eric Hynds.
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 this. Making Use of jQuery UI’s Widget Factory. For a long time, the only way to write custom controls in jQuery was to extend the $.fn namespace.
This works well for simple widgets, however, as you start building more stateful widgets, it quickly becomes cumbersome. To aid in the process of building widgets, the jQuery UI team introduced the Widget Factory, which removes most of the boilerplate that is typically associated with managing a widget. The widget factory, part of the jQuery UI Core, provides an object-oriented way to manage the lifecycle of a widget. These lifecycle activities include: Creating and destroying a widgetChanging widget options Making "super" calls in subclassed widgetsEvent notifications Let's explore this API, as we build a simple bullet chart widget. The Bullet Chart Widget Before we build this widget, let's understand some of the building blocks of the widget. The chart consists of a set of bars and markers overlaid on each other to indicate relative performance.
The HTML for this chart looks like so: Summary. Newest 'jquery-ui-widget-factory' Questions. jQuery UI Widget Factory. Plugin users can change options after a plugin has been invoked using $("elem").filterable("option","className","newName");. If modifiying a particular option requires an immediate state change, use the _setOption method to listen for the change and act on it. var total = $("#total"), cheeses = $("#cheeses"), register = $("#register"), price = $("<span>"), activation.click(function() { if ( cheeses.is(":aj-filterable") ) { return cheeses.filterable("destroy"); cheeses.filterable({ className: "cheese", create: function() { register.addClass("ui-widget-header cheese").show(); }, filtered: function(e, ui) { var t = 0; ui.visible.each(function() { t = t + parseFloat( $(this).data("price") ); }); total.text( t.toFixed( 2 ) ); setOption: function(e, ui) { ui.option === "className" && register.toggleClass([ui.original, ui.current].join(" ")); hover: function(e, ui) { if (e.originalEvent.type === "mouseenter") { price.text(" - " + ui.hovered.data("price") + " per lb").appendTo(ui.hovered); } else {
Widget Factory. Widget Factory. Widget Factory.