The Widget Factory

218742

The Widget Factory

Version 1.8 of jQuery UI split the functionality that allows widgets to be easily jquery.ui.widget. jsfn.extend() method for easily creating plugins, that the common API functionality is retained in new plugins. Resetting a widgetCreating an example calculator widget

Adding options to our example widget

Supporting the common API methods

Using our widget in a web page

Introducing the Widget Factory

of the interaction is limited to us calling them on an element. In most cases, this basic plugin pattern.

The Widget Factory

[ 2 ] jQuery.widget as part of jQuery UI.

Reasons for using the Widget Factory

method within jQuery.prototype (or $.fn, as it is more commonly written), and with others within our code. Eliminate the need to produce a lot of boilerplate code for the plugin most cases, jQuery plugins are stateless; they perform a single action o n an normally extend jQuery's prototype. If a plugin is stateful, it requires code to clear, consistent format that can be used across all jQuery UI plugins.

Produce a consistent API

your widgets. ui, which is not a good practice (jQuery.al) jQuery.al.filterable.prototype) and extend the existing jQuery prototype (jQuery.fn.filterable) .data() method to store plugin instance in .data() plugin( "foo" ) or directly .foo()

Chapter 15

[ 3 ] ._trigger method such as _trigger( "event" ) the plugin we will use later in this chapter to create an example calculator widget

Creating a skeleton plugin

name in the format of . ( function($,undefined) { $.widget( "al.progressbar", { // These options will be used as defaults options: { className : "" }, Next comes the initialization method for the widget; here is where we se t up the _create: function() { filter: function() {

The Widget Factory

[ 4 ] is only intended to be within the widget itself and not for general cons umption. _hover: function() { Unless our widget only performs one operation or doesn't need to allow t he user to plugin, we now need to respond to those option changes and process any r equests. _SetOptions, which is called anytime the option() _setOptions: function (options) { this._superApply(arguments); _SetOption, which processes each option change before calling the _setOption: function( key, value ) { return this._superApply( arguments ); _destroy _destroy: function() { return this._super(); })(jQuery);

Setting options in a widget

widget; these are in addition to any that you add as custom options to y our widget.

Chapter 15

[ 5 ]

OptionDefault valueUse

disabledfalseDisables the widget if set to true hidenull can accept boolean, string, number, or object as input shownullSets if or how to animate the displaying of the boolean, string, number, or object as input

Setting options on initialization

In addition, we can add our own options to the widget, in a similar fash ion to that you might use for creating jQuery plugins. It's good practice to expose the defaults can then merge these into the standard options that are exposed by the w idget, $.fn.plugin = function( options ) { options = $.extend( {}, $.fn.plugin.defaults, options ); // Plugin logic goes here. $.fn.plugin.defaults = { param1: "foo", param2: "bar", param3: "baz" $.widget( "al.plugin", { // Default options options: { param1: "test", param2: "foo", param3: "sample" _create: function() {

The Widget Factory

[ 6 ] // Options are already merged and stored in this.options // Plugin logic goes here. we'll see how in the Watching out for changes section later in this chapter.

Creating the base widget

using the _create() method. Here, we would call any methods that are needed to

OptionDefault valueUse

_create()jQuery use to initiate our widget. It doesn't require any parameters, but this.element and this.options are already set.

Setting widget methods

number of other methods that we can use when creating our widgets, in ad dition to

The Widget Factory

Version 1.8 of jQuery UI split the functionality that allows widgets to be easily jquery.ui.widget. jsfn.extend() method for easily creating plugins, that the common API functionality is retained in new plugins. Resetting a widgetCreating an example calculator widget

Adding options to our example widget

Supporting the common API methods

Using our widget in a web page

Introducing the Widget Factory

of the interaction is limited to us calling them on an element. In most cases, this basic plugin pattern.

The Widget Factory

[ 2 ] jQuery.widget as part of jQuery UI.

Reasons for using the Widget Factory

method within jQuery.prototype (or $.fn, as it is more commonly written), and with others within our code. Eliminate the need to produce a lot of boilerplate code for the plugin most cases, jQuery plugins are stateless; they perform a single action o n an normally extend jQuery's prototype. If a plugin is stateful, it requires code to clear, consistent format that can be used across all jQuery UI plugins.

Produce a consistent API

your widgets. ui, which is not a good practice (jQuery.al) jQuery.al.filterable.prototype) and extend the existing jQuery prototype (jQuery.fn.filterable) .data() method to store plugin instance in .data() plugin( "foo" ) or directly .foo()

Chapter 15

[ 3 ] ._trigger method such as _trigger( "event" ) the plugin we will use later in this chapter to create an example calculator widget

Creating a skeleton plugin

name in the format of . ( function($,undefined) { $.widget( "al.progressbar", { // These options will be used as defaults options: { className : "" }, Next comes the initialization method for the widget; here is where we se t up the _create: function() { filter: function() {

The Widget Factory

[ 4 ] is only intended to be within the widget itself and not for general cons umption. _hover: function() { Unless our widget only performs one operation or doesn't need to allow t he user to plugin, we now need to respond to those option changes and process any r equests. _SetOptions, which is called anytime the option() _setOptions: function (options) { this._superApply(arguments); _SetOption, which processes each option change before calling the _setOption: function( key, value ) { return this._superApply( arguments ); _destroy _destroy: function() { return this._super(); })(jQuery);

Setting options in a widget

widget; these are in addition to any that you add as custom options to y our widget.

Chapter 15

[ 5 ]

OptionDefault valueUse

disabledfalseDisables the widget if set to true hidenull can accept boolean, string, number, or object as input shownullSets if or how to animate the displaying of the boolean, string, number, or object as input

Setting options on initialization

In addition, we can add our own options to the widget, in a similar fash ion to that you might use for creating jQuery plugins. It's good practice to expose the defaults can then merge these into the standard options that are exposed by the w idget, $.fn.plugin = function( options ) { options = $.extend( {}, $.fn.plugin.defaults, options ); // Plugin logic goes here. $.fn.plugin.defaults = { param1: "foo", param2: "bar", param3: "baz" $.widget( "al.plugin", { // Default options options: { param1: "test", param2: "foo", param3: "sample" _create: function() {

The Widget Factory

[ 6 ] // Options are already merged and stored in this.options // Plugin logic goes here. we'll see how in the Watching out for changes section later in this chapter.

Creating the base widget

using the _create() method. Here, we would call any methods that are needed to

OptionDefault valueUse

_create()jQuery use to initiate our widget. It doesn't require any parameters, but this.element and this.options are already set.

Setting widget methods

number of other methods that we can use when creating our widgets, in ad dition to

12345 Next

Politique de confidentialité -Privacy policy