Jquery widget development-core framework, jquerywidget

Jquery widget development-core framework, jquerywidget

Framework code:

$. Widget ("myns. myplugin ", {// default parameter options: {clear: null}, // initialization, the control only runs once in the lifecycle _ init: function (){,} // create a control. The control will run multiple times in the lifecycle. _ create: function () {}, // you can set the parameter _ setOption: function (key, value) {// In jQuery UI 1.8 and previous usage $. widget. prototype. _ setOption. apply (this, arguments); // In jQuery UI 1.9 and later use this. _ super ("_ setOption", key, value) ;}, // release control destroy: function () {// In jQuery UI 1.8 and previous usage $. widget. prototype. destroy. call (this); // In jQuery UI 1.9 and later});} (jQuery ));

Development point: the internal method of the control starts with an underscore.

What is the difference between jquery widget and jquery?

Jquery widgets are obviously jquery's gadgets. They are similar to plug-ins and can be understood literally.
There are many widgets in jquery ui, such as dialog and progressbar.
Jquery is the basis of this, that is, if you want to use jquery ui, you must first have jquery. Jquery ui has many widgets. You need to use them.

How to Use the JQuery framework to develop various controls

I know two methods, but my most common format is:
(Function ($ ){
$. Fn. jqFade = function (opts ){
// Executed code
}

}) (JQuery );
Where:
(Function ($ ){
// Content
}) (JQuery); is an encapsulation function. Avoid external references (I understand this)
$. The jqFade after fn can be defined by itself, and can be referenced externally as follows: obj. jqFade (opts ). Obj is a jquery object, such as: $ ("# ID ")
Opts is the parameter you want to input. Frequently used:
Var ps = {id: tabId, headerPlain: false, width: 180, left: 0, top: 0}
Ps = $. extend (, opts)
That is, the opts value overwrites the ps value to pass in the USER parameter.

In addition, you can directly use $. jqFade (), and externally you can directly reference it.