JavaScript plug-in development tutorial (III) _ javascript skills

We have learned how to develop plug-ins in jQuery. we are talking about some basic theoretical knowledge. now, let's take a look at it and learn how to develop our own plug-in library. I. opening analysis

In the previous two articles, we mainly talked about how to develop plug-ins using jQuery, and how to combine process design with object-oriented design.

The two ways to design a plug-in have their own advantages and disadvantages. this series of articles is learning-oriented, and you can decide how to use the plug-in specific scenarios. Now, starting from this article, we will take you through examples to develop your own plug-in library from a simple perspective. Hey, let's get started. Directly speaking:

As you can see, this is a tab plug-in. we may be exposed to the single-page application ("SPA") in our daily work. let's take the example today,

A system based on bsstructure consists of several modules, which are all components of the building system. with this plug-in, we can effectively manage our modules.

As well as the user's interactive experience, let's analyze it in detail.

(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:

Bigbear. ui. createTab ($ ("# tab "),{
ButtonText: "Adding modules ",
Result :[
{
Text: "wizard prompt ",
Url: "help.html ",
ShowClose: "0 ",
Status: "1"
},
{
Text: "Student Information ",
Url: "info.html ",
ShowClose: "1 ",
Status: "1"
},
{
Text: "Student Classification ",
Url: "category.html ",
ShowClose: "1 ",
Status: "1"
},
{
Text: "Da Xiongjun {bb }}",
Url: "bb.html ",
ShowClose: "1 ",
Status: "1"
},
{
Text: "Beta test module ",
Url: "test.html ",
ShowClose: "1 ",
Status: "1"
}
]
});

"Bigbear. ui. createTab contains two parameters: the first is the dom node object, and the second is the plug-in parameter option. "buttonText" represents the text description of the operation button in the "Tab" plug-in.

"Result" is an array containing the properties of the TAB project, including text descriptions. when you click a TAB project, the request url is used, "showClose" indicates whether to display the close button for the tab options.

"Status" indicates the status of the option. it is enabled by default, and may be closed. The options are 1-enabled and 0-disabled, respectively.

(2) what functions are involved?

Optional parameters are used to dynamically generate related option entries, as shown in the following example:

The code is as follows:

Bigbear. ui. createTab ($ ("# tab "),{
ButtonText: "Adding modules ",
Result :[
{
Text: "jQuery Source Code Analysis ",
Url: "help.html ",
ShowClose: "0 ",
Status: "1"
},
{
Text: "Da Xiongjun {bb }}}",
Url: "bb.html ",
ShowClose: "1 ",
Status: "1"
}
]
});

The effect is as follows:

You can add or delete entries as follows:

In either case, a message is displayed when no module is available.

This is the second case. previously deleted items can be restored.

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

(1), html

The code is as follows:

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

+ Add student information

(2) css file code

The code is as follows:

. Dxj-ui-hd {
Padding: 0px;
Margin: 0 auto;
Margin-top: 30px;
Width: 780px;
Height: 60px;
Line-height: 60px;
Background: # 3366ff;
Color: # fff;
Font-family: "";
Font-size: 28px;
Text-align: center;
Font-weight: bold;
}
. Dxj-ui-bd {
Padding: 0px;
Margin: 0 auto;
Width: 778px;
Padding-top: 30px;
Padding-bottom: 30px;
Overflow: hidden;
Border: 1px solid # 3366ff;
}
. Dxj-ui-bd # tab {
Padding: 0px;
Margin: 0 auto;
Width: 720px;
Overflow: hidden;
}
. Dxj-ui-bd # tab. title {
Width: 720px;
Overflow: hidden;
Border-bottom: 2px solid # 3366ff;
}
. Dxj-ui-bd # tab. title. adder {
Width: 160px;
Height: 32px;
Line-height: 32px;
Background: # DC143C;
Color: # fff;
Font-family: "";
Font-size: 14px;
Text-align: center;
Font-weight: bold;
Float: left;
Cursor: pointer;
}
. Dxj-ui-bd # tab. title. items {
Height: 32px;
Margin-left: 20px;
Width: 540px;
Overflow: hidden;
Float: left;
}
. Dxj-ui-bd # tab. title. items p {
Padding: 0px;
Margin-left: 10px;
Width: 96px;
Height: 32px;
Line-height: 32px;
Background: # 3366ff;
Color: # fff;
Font-family: arial;
Font-size: 12px;
Text-align: center;
Position: relative;
Float: left;
Cursor: pointer;
}
. Dxj-ui-bd # tab. title. items p span. del {
Width: 16px;
Height: 16px;
Line-height: 16px;
Display: block;
Background: # DC143C;
Position: absolute;
Right: 0;
Top: 0;
Cursor: pointer;
}
. Dxj-ui-bd # tab. content {
Width: 716px;
Padding-top: 30px;
Overflow: hidden;
Border: 2px solid # 3366ff;
Border-top: 0px;
Min-height: 130px;
Text-align: center;
}
. Dxj-ui-bd # tab. content table {
Margin: 0 auto;
}
. Dxj-ui-bd # tab. content p. c {
Padding-top: 20px;
Padding-left: 20px;
Background: # eee;
Height: 140px;
}
. Dxj-ui-bd # tab. content p. c. input-content {
Margin-top: 10px;
Font-family: arial;
Font-size: 12px;
}
. Dxj-ui-bd # tab. console-panel {
Width: 716px;
Padding-top: 20px;
Padding-bottom: 20px;
Overflow: hidden;
Border: 2px solid # 3366ff;
Border-top: 0px;
Border-bottom: 2px solid # 3366ff;
Background: # fff;
Display: none;
}
. Active {
Font-weight: bold;
}

(3). The Js code is as follows:

The code is as follows:

$ (Function (){
Bigbear. ui. createTab ($ ("# tab "),{
ButtonText: "Adding modules ",
Result :[
{
Text: "wizard prompt ",
Url: "help.html ",
ShowClose: "0 ",
Status: "1"
},
{
Text: "Student Information ",
Url: "info.html ",
ShowClose: "1 ",
Status: "1"
},
{
Text: "Student Classification ",
Url: "category.html ",
ShowClose: "1 ",
Status: "1"
},
{
Text: "Da Xiongjun {bb }}",
Url: "bb.html ",
ShowClose: "1 ",
Status: "1"
},
{
Text: "Beta test module ",
Url: "test.html ",
ShowClose: "1 ",
Status: "1"
}
]
});
});
(Function ($ ){
Var win = window;
Var bb = win. bigbear = win. bigbear | {
Ui :{}
};
Var ui = bb. ui = {};
Var Tab = function (elem, opts ){
This. elem = elem;
This. opts = opts;
};
Var tabProto = Tab. prototype;
TabProto. _ deleteItem = function (item ){
Var that = this;
This. getElem (). find (". title. items p ")
. Eq (item ["index"])
. FadeOut (function (){
That. _ resetContent ();
That. _ updateStatus (item );
That. _ triggerItem (item ["index"] + 1 );
That. getElem (). find (". title. adder"). trigger ("click ");
});
};
TabProto. _ triggerItem = function (next ){
Var nextStatus = this. _ getStatus (next );
Var items = this. getElem (). find (". title. items p ");
Next = items. eq (next );
If (next. size () & amp; "1" = nextStatus) {// A subsequent dom node exists
Next. trigger ("click ");
}
Else {
Items. eq (0). trigger ("click ");
}
};
TabProto. _ getStatus = function (index ){
Var status = "";
$. Each (this. getOpts () ["result"], function (I, item ){
If (index = item ["index"]) {
Status + = item ["status"];
Return false;
}
});
Return status;
};
TabProto. _ updateStatus = function (item ){
Var status = item ["status"];
Item ["status"] = ("1" = status )? "0": "1 ";
};
TabProto. init = function (){
Var that = this;
This. getElem (). find (". title. adder ")
. Text ("+" + this. getOpts () ["buttonText"])
. On ("click", function (){
That. _ toggleConsolePanel (function (){
Var root = that. getElem (). find (". console-panel"). empty ();
$. Each (that. getOpts () ["result"], function (I, item ){
If ("0" = item ["status"]) {
Var elem = $ ("

")
. Data ("item", item)
. AppendTo (root );
$ (" "). AppendTo (elem );
$ (""). Text (item ["text"]). appendTo (elem );
}
});
If (root. find ("p"). size ()){
$ (" ")
. On ("click", function (){
Var data = root. find ("input [type = radio]: checked"). parent (). data ("item ");
That. _ updateStatus (data );
That. getElem (). find (". title. items p"). eq (data ["index"]). fadeIn (). trigger ("click ");
That. getElem (). find (". title. adder"). trigger ("click ");
})
. AppendTo (root );
}
Else {
Root. text ("no projects can be added! ");
}
});
});
$. Each (this. getOpts () ["result"], function (I, item ){
Item ["index"] = I;
That. _ render (item );
});
This. getElem (). find (". title. items p ")
. Eq (0)
. Trigger ("click"); // It is assumed that there must be one item. Otherwise, the plug-in will be meaningless!
};
TabProto. _ toggleConsolePanel = function (callback ){
This. getElem (). find (". console-panel"). slideToggle (function (){
$. IsFunction (callback) & callback ();
});
};
TabProto. _ resetContent = function (){
This. getElem (). find (". content" pai.html ("");
};
TabProto. _ setContent = function (html ){
This. getElem (). find (". content" pai.html (html );
};
TabProto. _ getContent = function (url ){
Return $. ajax ({
Url: url
});
};
TabProto. _ render = function (data ){
Var that = this;
Var item = $ ("

")
. Text (data ["text"])
. On ("click", function (){
That. _ setCurrent (data ["index"]);
That. _ getContent (data ["url"]). done (function (result ){
That. _ setContent (result );
})
. Fail (function (){
Throw new Error ("Net Error! ");
});
})
. AppendTo (this. getElem (). find (". title. items "));
If ("1" = data ["showClose"]) {
$ ("X ")
. On ("click", function (){
If (win. confirm ("Do you want to delete this item? ")){
That. _ deleteItem (data );
Return false; // prevents bubbling.
}
})
. AppendTo (item );
}
};
TabProto. _ setCurrent = function (index ){
Var items = this. getElem (). find (". title. items p"). removeClass ("active ");
Items. eq (index). addClass ("active ");
Var contents = this. getElem (). find (". content. c"). hide ();
Contents. eq (index). show ();
};
TabProto. getElem = function (){
Return this. elem;
};
TabProto. getOpts = function (){
Return this. opts;
};
Ui. createTab = function (elem, opts ){
Var tab = new Tab (elem, opts );
Tab. init ();
Return tab;
};
}) (JQuery );

(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) think about whether the options in the preceding example can be independent into independent classes? For example, "Item", how to modify the "Tab" class? Think with questions...

The above is all the content of this article. we will continue to improve this plug-in the future. if you like this article, I would like to give you a compliment.