JQuery ui api developer guide, jqueryuiapi developer

JQuery ui api developer guide, jqueryuiapi developer

Original article address:

Http://jqueryui.com/docs/Developer_Guide

 

The widget factory)

 

Ui. core. js provides a factory method to create component classes. Identified by $. widget (String name, Options prototype.

 

Call the factory method to create a part class instance or interact with a part instance.

 

In addition to the methods provided by the prototype, each instance can also use the following default method:

• Destroy (): Remove the created instance from the DOM element.
• GetData/setData/data (String key [, String value]): Get or set an option for the instance
• Enable (): Set the disabled option to false, its up to the instance to respect the option
• Disable (): Set the disabled option to true, its up to the instance to respect the option

Attributes that can be used by each instance:

• Options: Component instance options, which are usually the default options provided by users.
• Element: OneJQuery objectAlways contains a singleDOMElement,You can obtain this. element [0] in this way.

In your part code, you can override these methods. If you want to "inherit" these methods and add some functions, do this:

$. Widget. prototype. methodToOverride. apply (this, arguments );

The default method is executed. Then you can add custom code.

 

Script:

$. Widget ("ui. mywidget ", {_ init: function () {// initialization code of mywidget // you can use this. options if (this. options. hidden) {// and this. element this. element. hide () ;},_ doSomething: function () {// The Name Of The internal function should start with an underscore: // operate this part}, value: function () {// calculate some values and return this. _ calculate () ;}, length: function () {return this. _ someOtherValue () ;}, destroy: function () {$. widget. prototype. apply (this, arguments); // destroy by default // do some special things for this part}); $. extend ($. ui. mywidget, {getter: "value length", defaults: {option1: "defaultValue", hidden: true }});

Any jQuery UI component uses the component factory. For more examples, you can find all the source code of a plug-in, such as ui. progressbar. js.

 

For a more comprehensive tutorial on writing UI parts, open the link.

 

Set and obtain attributes

 

During component initialization, the coders can pass the option to override the default option.

$ ("Div"). draggable ({helper: "clone", axis: "x "});

In the above Code, all divs will be converted into movable objects, except helper and xis, with default options. However, once an element is created, all other calls to the part name will be ignored if the first parameter is not a string, therefore, it cannot be used to set options after the instance is initialized.

To obtain and set attributes, you must useOptionMethod. For example, to change the axis of draggable to 'y', you need to set it as follows:

$ ("Div"). draggable ("option", "axis", "y ");

[Translator: instead of the above method to set attributes]

To obtain an option value, you must use:

Var saveAxis = $ ("div"). draggable ("option", "axis ");

Parts are created by binding custom events to elements. If you want to listen to these settings or get actions, you can rewrite the setData/getData function in the component prototype definition, as shown in the following figure:

SetData: function (key, value) {}, getData: function (key ){}

Then, the internal $ (...). data () function triggers those events to check whether the default behavior should be overwritten, and set or return values.

 

Description of internal functions and applications

JQuery. data/jQuery. fn. data

 

Component developers often need to add so-called extensions to DOM nodes, which means that DOM nodes need to store additional data, which often results in Memory leakage.

JQuery has its own method to solve -- data function. It creates a special string for each node and uses it to store data, so it does not produce circular references.

Your component instance is automatically stored by the component factory with the keyword 'components' (replace the widget with your component name ):

This. element. data ("draggable") = this;

Or

JQuery. data (this. element [0], "draggable") === this

 

This example is also used by the UI framework to track whether a component in a node is created. The UI allows each node part to be created multiple times. Deleting an instance is as follows:

RemoveData ("myWidgetName ")

For more information, see Internals/jQuery. data

 

JQuery. fn

JQuery. fn is the most common plug-in location of jQuery,