Tutorial on JavaScript plug-in Development (v) _ javascript skills

This article is the fifth article in The JavaScript plug-in development series. It focuses on practice. You can use specific examples to learn how to develop plug-ins using jQuery. If you have the same requirements, refer to it. I. Opening Analysis

Hi everyone! In the first two articles, we mainly talked about how to develop plug-ins in jQuery mode, and how to design a plug-in by combining process design with object-oriented design, the two methods have their own advantages and disadvantages. Directly speaking:

As you can see, this is a drop-down menu plug-in. In our daily development, what the system provides may sometimes make us feel pretty and have limited functions, resulting in users

The user experience and user interactivity are not very good. The following is a detailed analysis.

(2) instance analysis

(1) first, determine what the plug-in is doing. The following describes how the plug-in is called and the configuration parameters. The following code:

The Code is as follows:

$ (Function (){
Var itemSelector = new ItemSelector ($ ("# item-selector "),{
CurrentText: "Please Choose Item ",
Items :[
{
Text: "JavaScript ",
Value: "js ",
Disabled: "1"
},
{
Text: "Css ",
Value: "css ",
Disabled: "0"
},
{
Text: "Html ",
Value: "html ",
Disabled: "0"
}
],
Mode: "0", // the checkbox multi-choice mode is supported when the value is "1 ".
Change: function (value ){
// Put your code here
}
});
ItemSelector. init ();
SetTimeout (function (){
Console. log (itemSelector. getCurrentValue (); // obtain the first selected item for test
},2000 );

　

"Var itemSelector = new ItemSelector ()" contains two parameters, the first is the dom Node object, and the second is the plug-in parameter option. "currentText" represents the "ItemSelector" plug-in, select the text description of the text display area.

"Items" is an array containing the attributes of the "ItemSelector" project, including text descriptions, option values, and "disabled", which indicates the display of list entries, and 0 indicates display, 1 indicates that it cannot be displayed.

"Change" indicates the operation callback function selected. The option data is returned in the form of parameters.

(2) What functions are involved?

It can be displayed as follows:

Which cannot be displayed as follows:

The difference between the two is that data in the non-current status will not be returned and will not be suspended for any effect.

3) complete codeThis code has been tested, including the directory structure and related files.

(1), html

The Code is as follows:

Xiong Jun {bb }}- dxj ui ------ ItemSelector

Bytes

(2), css

The Code is as follows:

/* Item-selector */
# Item-selector {
Margin: 0 auto;
Width: 220px;
Overflow: hidden;
Border: 2px solid # ccc;
}
# Item-selector. title {
Border-bottom: 1px solid # ccc;
Overflow: hidden;
}
# Item-selector. title p {
Width: pixel PX;
Border: 0px;
Color: #999;
Font-family: arial;
Font-size: 14px;
Height: 28px;
Line-height: 28px;
Float: left;
Cursor: pointer;
}
# Item-selector. title span {
Display: block;
Height: 30px;
Line-height: 30px;
Width: 29px;
Float: left;
Text-align: center;
Border-left: 1px solid # ccc;
Cursor: pointer;
}
# Item-selector. content {
Width: 220px;
Overflow: hidden;
}
# Item-selector. content. items {
Overflow: hidden;
}
# Item-selector. content. items p {
Padding-left: 20px;
Width: 200px;
Height: 32px;
Line-height: 32px;
Font-family: "";
Font-size: 14px;
Font-weight: bold;
Cursor: pointer;
}
. Item-hover {
Background: # 3366ff;
Color: # fff;
}

(3), "ItemSelector. js? 1.1.11"

The Code is as follows:

Function ItemSelector (elem, opts ){
This. elem = elem;
This. opts = opts;
};
Var ISProto = ItemSelector. prototype;
ISProto. getElem = function (){
Return this. elem;
};
ISProto. getOpts = function (){
Return this. opts;
};
/* Data manip */
ISProto. _ setCurrent = function (current ){
This. getOpts () ["current"] = current;
};
ISProto. getCurrentValue = function (current ){
Return this. getOpts () ["current"];
};
/* Data manip */
ISProto. init = function (){
Var that = this;
This. getOpts () ["current"] = null; // data cursor
This. _ setItemValue (this. getOpts () ["currentText"]);
Var itemsElem = that. getElem (). find (". content. items ");
This. getElem (). find (". title p"). on ("click", function (){
ItemsElem. toggle ();
});
This. getElem (). find (". title span"). on ("click", function (){
ItemsElem. toggle ();
});
$. Each (this. getOpts () ["items"], function (I, item ){
Item ["id"] = (new Date (). getTime (). toString ();
That. _ render (item );
});
};
ISProto. _ setItemValue = function (value ){
This. getElem (). find (". title p"). text (value)
};
ISProto. _ render = function (item ){
Var that = this;
Var itemElem = $ ("

")
. Text (item ["text"])
. Attr ("id", item ["id"]);
If ("0" = item ["disabled"]) {
ItemElem. on ("click", function (){
Var onChange = that. getOpts () ["change"];
That. getElem (). find (". content. items"). hide ();
That. _ setItemValue (item ["text"]);
That. _ setCurrent (item );
OnChange & onChange (item );
})
. Mouseover (function (){
$ (This). addClass ("item-hover ");
})
. Mouseout (function (){
$ (This). removeClass ("item-hover ");
});
}
Else {
ItemElem.css ("color", "# ccc"). on ("click", function (){
That. getElem (). find (". content. items"). hide ();
That. _ setItemValue (item ["text"]);
});
}
ItemElem. appendTo (this. getElem (). find (". content. items "));
};

(4). Conclusion

(1) Rational Analysis of functional requirements using object-oriented thinking methods.

(2) organize our plug-in logic in the form of classes.

(3) How should we rebuild the above instances rationally? Do not over-design. It is easy to use. We recommend that you use a combination of Procedural Design and object-oriented design.

(4) In the next article, related functions will be extended. For example, if the attribute "mode" is "1", the checkbox multi-choice mode is supported. Now it is only the default drop-down mode.

This article is here first, and we will continue to discuss it later. I hope my friends will like this series of articles.