1. Opening analysis
Hi, everyone! In the first two articles, we mainly talk about how to develop plug-ins in "jQuery's way", and how to design a plug-in by combining process design with object-oriented thinking design. Both methods have their pros and cons to learn from their strengths and weaknesses. Hehehe, let's talk less nonsense, and get to the point. Directly on the actual renderings:
You can see it. This is a drop-down menu plug-in. In our daily development, the system may sometimes make us feel that it is not very beautiful and has limited functions, causing users to
The experience form and user interactivity are not very good, so today I simulate a hehehehehe. Let’s analyze it in detail below.
(II), case analysis
(1) First, determine what this plugin does. Let’s take a look at the call method of the plug-in and the configuration parameter description. The following code:
The code copy 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" , // When "1", it supports checkbox multiple selection mode
change : function(value){
// put your code here
}
}) ;
itemSelector.init();
setTimeout(function(){
console.log(itemSelector.getCurrentValue()); // Test to get the selected item first
},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 text description of the text display area in the "ItemSelector" plug-in.
"items" is an array containing the properties of the "ItemSelector" item, including text description, option value, "disabled" represents the visibleness of the list entry, 0 represents display, and 1 represents not to be displayed.
"change" represents the operation callback function when selected, and the option data will be returned in the form of parameters.
(2) What are the functions involved?
The renderings that can be displayed are as follows:
The renderings that cannot be displayed are as follows:
The difference between the two is: the unrevealed state data will not be returned, and there will be no effect when floating up.
3) The complete code is for learning. This code has been tested, including directory structure and related files.
(1), html
The code copy is as follows:
<body>
<div>
Big Bear {{bb}} - DXJ UI ------ ItemSelector
</div>
<div>
<div id="item-selector">
<div>
<div></div><span>↓</span>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</body>
(2), css
The code copy 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 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 Yahei";
font-size: 14px;
font-weight:bold;
cursor:pointer;
}
.item-hover {
background:#3385ff;
color:#ffff;
}
(3), "ItemSelector.js"
The code copy 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 div").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 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), final summary
(1) A reasonable analysis of functional requirements in an object-oriented way of thinking.
(2), organize our plug-in logic in a class way.
(3) Continuously reconstruct the above examples, how to reasonably reconstruct that? Don’t over-design, be at ease. The recommended method is to combine process design with object-oriented thinking design.
(4) The following article will expand related functions, such as the property "mode". When it is "1", it supports checkbox multi-select mode, but now it is just the default drop-down mode.
This article is over here first, and we will continue to discuss it later. I hope you can enjoy this series of articles.