Home > Developer > JavaScript
First, the opening analysis
Hi, hello, everyone! Big Bear June again and everyone met, remember the first two articles. This paper mainly describes how to develop plug-ins in the way of "jquery", and the combination of process design and object-oriented thought design.
How to design a plug-in, the two ways each have advantages and disadvantages, this series of articles are learning-oriented, specific scenarios we decide how to use. So today, starting with this article, let's start with an example
The way with everyone to develop their own plug-in library. Hehe hey, talk less, get to the point. Directly on the actual:
You see, this is a drop-down menu plugin, in our daily development, the system may sometimes make us feel not very beautiful and limited functionality, resulting in user
The form of the experience and the user's interactivity is not very good, so today simulation of a hehe hey. Here is a detailed analysis of it.
(ii), case analysis
(1), first determine what the plugin does. Here's a look at how the plug-in is called and the configuration parameter description. The following code:
1$(function(){2 varItemselector =NewItemselector ($ ("#item-selector"),{3Currenttext: "Please Choose Item" ,4 items: [5 {6Text: "JavaScript" ,7Value: "JS" ,8Disabled: "1"9 } ,Ten { OneText: "Css" , AValue: "CSS" , -Disabled: "0" - } , the { -Text: "Html" , -Value: "HTML" , -Disabled: "0" + } - ] , +Mode: "0",//checkbox Multi-select mode is supported for "1" AChange:function(value) { at //put your code here - } - }) ; - itemselector.init (); -SetTimeout (function(){ -Console.log (Itemselector.getcurrentvalue ());//test Get yourselves selected item in},2000) ; -}) ;
"var itemselector = new Itemselector ()" contains two parameters, the first is the DOM node object, the second is the plug-in Parameter option, "Currenttext" represents the "Itemselector" plug-in, Select the text description for the display area.
"Items" is an array containing the properties of the "itemselector" item, including the text description, the option value, "Disabled" for the list entry, 0 for the display, and 1 for non-display.
"Change" represents the action callback function when selected, and the option data is returned as a parameter.
(2), what are the functions involved
The following can be shown:
The following are not obvious:
The difference between the two is: the non-present status data will not be returned, the suspension will not have any effect.
III), complete code for learning, this code has been tested, including directory structure and related files.
(1), HTML
1<body>2<div class= "DXJ-UI-HD" >3Big Bear {{BB}}-Dxj UI------Itemselector4</div>5<div class= "DXJ-UI-BD" >6<div id= "Item-selector" >7<div class= "title" >8<div></div><span>↓</span>9</div>Ten<div class= "Content" > One<div class= "Items" > A -</div> -</div> the</div> -</div> -</body>
(2), CSS
1 /*Item-selector*/2 3#item-Selector {4margin:0Auto;5 width:220px;6 Overflow:hidden;7 border:2px solid #ccc;8 }9#item-Selector. title {Tenborder-bottom:1px solid #ccc; One Overflow:hidden; A } -#item-Selector. Title div { - width:190px; the border:0px; -Color: #999; -font-family:arial; -font-size:14px; + height:28px; -line-height:28px; + float: Left; A Cursor:pointer; at } -#item-Selector. title Span { - Display:block; - height:30px; -line-height:30px; - width:29px; in float: Left; -text-Align:center; toborder-left:1px solid #ccc; + Cursor:pointer; - } the#item-Selector. Content { * width:220px; $ Overflow:hidden;Panax Notoginseng } -#item-selector. Content. Items { the Overflow:hidden; + } A#item-selector. Content. Items div { thepadding-left:20px; + width:200px; - height:32px; $line-height:32px; $font-family: "Microsoft Ya Hei" ; -font-size:14px; -font-Weight:bold; the Cursor:pointer; - }Wuyi. item-Hover { the background: #3385ff; - color: #fff; Wu}
(3), "Itemselector.js"
function Itemselector (elem,opts) {This.elem = Elem; this.opts = opts;}; var isproto = Itemselector.prototype; isproto.gete Lem = 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 = this, this.getopts () ["current"] = NULL;//Data cursor this._setitemvalue (th Is.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 = 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), concluding
(1), the object-oriented thinking mode reasonable analysis of functional requirements.
(2) To organize our plug-in logic in a class way.
(3), constantly reconstruct the above example, how to make reasonable reconstruction that? Do not design too much, to ease, the recommended way is the process of design and object-oriented thinking design combination.
(4), the next article will extend the relevant features, such as "mode" this property, for "1" when the checkbox multi-select mode, is now only the default drop-down mode.
hahaha, the end of this article, not to be continued, hope and we have enough communication, common progress ... To shout ... (*^__^*)
Big Bear's JavaScript plugin development------(DXJ UI------itemselector)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
