Jquery widget development tutorial

Title: jquery widget development tutorial
-Roamman
2010-02-02 read: 35

-Comment: 0 | Add Comment
| Return
Bytes

Original article: http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/

Since HTML and script cannot be used after translation, the demo cannot be seen. Refer to the original article.

The purpose of this article is to help me understand and develop my own Widgets. At the same time, I hope this article will be helpful to others. Widget is a kind of user interface element.
It is similar to a button or a complicated datepicker (date Selection control ). But this concept is a class for jquery. The members of this class are similar to some HTML elements.
Off, such as draggable and sortable. Of course, not all widgets use $. Widgets. For example, datepicker is not used.

 

Plugin: modify elements

Let's use a P element with CSS class as the target for example.

1	<P class = "target"> This is a paragraph </P>

Let's turn it green:

1	$ (". Target" ).css ({"background": 'green '});

Then we need to make this function more universal:

1	$. FN. Green = function () {return this.css ({Background: 'green '})}

The code above allows us to produce results on any selected element, but it does not allow us to maintain the association with an element. For example, if we want to create a background restoration function, we must determine its initial color. To design a darker (), we must know the color of the element.

Maintain the agent status

We can create an object to manage a ticket with an element:

Element. myobject = new myobject ({'target': Element })   $. FN. green2 = function (){ Return this. Each (function (){ If (! This. Green) This. Green = new green (this); // associate our State-keeping object with the element This. Green. setlevel (15 ); }); }; $. FN. Off = function (){ Return this. Each (function (){ If (this. Green) This. Green. setlevel (16 ); Delete this. Green; // recover the memory }); }; $. FN. Darker = function (){ Return this. Each (function (){ If (this. Green) This. Green. setlevel (this. Green. getlevel ()-1 ); }); }; $. FN. Lighter = function (){ Return this. Each (function (){ If (this. Green) This. Green. setlevel (this. Green. getlevel () + 1 ); }); };   Function Green (target ){ Greenlevels = ['# 000',' #010 ',' # 020', '# 030',' # 040', '# 050',' #060 ', '# 070',' # 080', '# 090',' #0a0 ',' # 0b0', '#0c0', '#0d0', '#0e0 ', '#0f0', '# fff']; This.tar get = target; // associate the element with the object This. Level = 0; This. getlevel = function () {return this. level ;} This. setlevel = function (x ){ This. Level = math. Floor (math. Min (greenlevels. Length-1, math. Max (0, x ))); This.target.css ({Background: greenlevels [This. level]}); } };

However, the above method makes a lot of functions appear in the $. FN namespace. We can also create another namespace in The namespace, but the general design idea is to use a string to call the corresponding function, that is, we can use element. green2 ("darker") to call the darker () method:

$. FN. green2 = function (which ){ Return this. Each (function (){ If (which = undefined) {// initial call If (! This. Green) This. Green = new green ($ (this); // associate our State-keeping object with the element This. Green. setlevel (15 ); } Else if (which = 'off '){ If (this. Green) This. Green. setlevel (16 ); Delete this. Green } Else if (which = 'darker '){ If (this. Green) This. Green. setlevel (this. Green. getlevel ()-1 ); } Else if (which = 'lighter '){ If (this. Green) This. Green. setlevel (this. Green. getlevel () + 1 ); } }); };   Function Green (target ){ Greenlevels = ['# 000',' #010 ',' # 020', '# 030',' # 040', '# 050',' #060 ', '# 070',' # 080', '# 090',' #0a0 ',' # 0b0', '#0c0', '#0d0', '#0e0 ', '#0f0 ', '# Fff']; This.tar get = target; // associate the element with the object This. Level = 0; This. getlevel = function () {return this. level ;} This. setlevel = function (x ){ This. Level = math. Floor (math. Min (greenlevels. Length-1, math. Max (0, x ))); This.target.css ({Background: greenlevels [This. level]}); } };

Problems arising from the Association of plug-ins and objects
The above method can easily write a program, but it also brings loop reference and possible memory vulnerabilities. The browser uses different garbage collection methods for JavaScript and DOM elements. The reference method above may cause problems, making the collection unable to proceed normally.
At the same time, we should also pay attention to the memory reclaim when developing plug-ins.
Jquery solves this problem with $. FN. Data:

1	$ (Element). Data ('myobject', new myobject ({'target': Element }))

However, this operation also brings about other problems. We need to do a lot of "extra" work, which is unrelated to the Program Logic and repetitive and useless. Therefore, repeated implementation of this function requires abstraction to reduce
Less work.
Solution: $. widget
This is why $. widget appears. It associates a single instance of the Javascript class in the plug-in with each element, so that we do not include
In-memory embroidery.
Same as above, you still need to create class constructor. The difference is that we need a prototype that contains the relevant methods ". There are also some changes, such:
The destroy () method is called in the destructor. Both functions are pre-defined, but you can override them. Element and our target above are jquery related to the class
Object.
All methods starting with "_" in the widget belong to a predefined type of UDF and cannot be called externally.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

VaR green3 = { _ Init: function () {This. setlevel (15 );}, Greenlevels: ['# 000',' #010 ',' # 020', '# 030',' # 040', '# 050',' #060 ', '# 070',' # 080', '# 090',' #0a0 ',' # 0b0', '#0c0', '#0d0', '#0e0 ', '#0f0 ', '# Fff'], Level: 0, Getlevel: function () {return this. level ;}, Setlevel: function (x ){ This. Level = math. Floor (math. Min (this. greenlevels. Length-1, math. Max (0, x ))); This.element.css ({Background: This. greenlevels [This. level]}); }, Darker: function () {This. setlevel (this. getlevel ()-1 );}, Lighter: function () {This. setlevel (this. getlevel () + 1 );}, Off: function (){ This.element.css ({Background: 'none '}); This. Destroy (); // use the predefined Function } };

The above code is the entire program logic. Use the following code to generate the plug-in:

1	$. Widget ("UI. green3", green3); // create the widget

This is the translation. It's almost my understanding. Maybe the translation is not good. please correct me.