JQuery UI Custom Component Implementation code (1/2)

Start by using the $.widget () method to define your component, which receives only three parameters: the first is the component name, the second is the optional base class component (the default base class is $.widget), and the third is the component's prototype.
Component names must contain namespaces, and note that the official component's namespace starts with ' UI ', such as ' Ui.tabs '. I use ' I ' in the following pinyin (' Wo ').
Copy code code as follows:

$.widget ("Yournamespace.yourwidgetname", [Yourbasewidget],yourwidgetprototype)

The $.widget base class contains an important attribute ' options ', it is used to define public parameters, and parameters that are invoked externally when the component is initialized override internal-defined parameters, as well as three important private methods ' _create ', ' _init ', ', ', and the top two functions equivalent to the constructor, Executed sequentially, the ' create ' event is triggered after the _create () method executes. The _trigger () method standardizes the specified function in the parameter to the event of a domain-name and triggers the custom event.
There are also three public methods ' enable ', ' Disable ', ' destroy ', which represents enabling, disabling, and destroying components, respectively.
The interesting thing here is the implementation of private and public methods. The Jquerui widget exposes methods that do not begin with ' _ ':
Copy code code as follows:

///Prevent calls to internal methods
if (ismethodcall && options.charat (0) = = "_") {
Return returnvalue;
}

In fact, the jQueryUI widget still retains the original API, such as using:
Copy code code as follows:

var $div = $ ('. Demo:first ');
var API = $div. Data (' Divzoom ');
Console.dir (API);
Api.zoomin ();
Contrast
$div. Divzoom (' zoomin ');

A small trick to implement a completely private variable:
Copy code code as follows:

(function ($) {
var privatevar = ';
$.widget ("Wo.divzoom", {});
}) (jquery)

All code
Copy code code as follows:

Home 1 2 last page