First, the opening analysis
Hi, everyone! The first two articles we mainly described the "jquery way how to develop Plug-ins", as well as the process design and object-oriented design approach is how to design a plug-in, the two ways each have advantages and disadvantages of each other, hehe hey, nonsense less say, get to the point. Directly on the actual effect diagram:
You see, this is a drop-down menu plugin, in our daily development, the system provides may sometimes make us feel not very beautiful and limited, resulting in user
The experience of the form and the user's interactivity is not very good, so today to simulate a hei heh hey. Here is a concrete analysis of it.
(ii), example analysis
(1), first determine what this plugin does. Let's look at how the plug-in is invoked and the configuration parameter description. The following code:
Copy Code code 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",//"1" supports checkbox multi-selection mode
Change:function (value) {
Put your code here
}
}) ;
Itemselector.init ();
settimeout (function () {
Console.log (Itemselector.getcurrentvalue ()); Test get the check in
},2000);
"var itemselector = new Itemselector ()" contains two parameters, the first is the DOM node object, the second is the plug-in parameter option, and "Currenttext" represents the "Itemselector" plug-in. Select the text description for the display area.
"Items" is an array that contains the properties of the "Itemselector" item, including text descriptions, option values, "disabled" represents the visibility of the list entry, 0 represents the display, and 1 is not visible.
Change represents the action callback function when selected, and the option data is returned as a parameter.
(2), what are the functions involved
The results can be shown as follows:
An effect chart that cannot be shown is as follows:
The difference is: No current state data will not return, suspension will not have any effect.
third, complete code for learning, this code has been tested, including the directory structure and related files.
(1), HTML
Copy Code code as follows:
<body>
<div class= "DXJ-UI-HD" >
Big Bear June {BB}}-dxj UI------Itemselector
</div>
<div class= "DXJ-UI-BD" >
<div id= "Item-selector" >
<div class= "title" >
<div></div><span>↓</span>
</div>
<div class= "Content" >
<div class= "Items" >
</div>
</div>
</div>
</div>
</body>
(2), CSS
Copy Code code 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 div {
width:190px;
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 div {
padding-left:20px;
width:200px;
height:32px;
line-height:32px;
font-family: "Microsoft Ya Hei";
font-size:14px;
Font-weight:bold;
Cursor:pointer;
}
. item-hover {
Background: #3385ff;
Color: #fff;
}
(3), "Itemselector.js"
Copy Code code 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 cursors
This._setitemvalue (This.getopts () ["Currenttext"]);
var Itemselem = That.getelem (). Find (". Content. Items");
This.getelem (). Find (". Title div"). On ("click", Function () {
Itemselem.toggle ();
}) ;
This.getelem (). Find (". Title spans"). 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 div"). Text (value)
} ;
Isproto._render = function (item) {
var that = this;
var Itemelem = $ ("<div></div>")
. 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"));
} ;
(iv) The final summary
(1), the object-oriented thinking way to analyze the functional requirements rationally.
(2) To organize our plug-in logic in a class manner.
(3), continuously reconstruct the above example, how to carry out the reasonable reconstruction that? Do not design excessive, to be comfortable, the recommended way is the process of design and object-oriented design of the combination of ideas.
(4), the next article will expand the relevant features, such as "mode" This property, "1" Support checkbox multiple selection mode, is now the default Drop-down mode.
This article first came here, follow-up we continue to discuss, I hope that the small partners can enjoy this series of articles.
