一,開篇分析javascript
Hi,你們好!大熊君又和你們見面了,還記得前兩篇文章嗎。主要講述了以「jQuery的方式如何開發插件」,以及過程化設計與面向對象思想設計相結合的方式是css
如何設計一個插件的,兩種方式各有利弊取長補短,本系列文章是以學習爲導向的,具體場景你們本身定奪使用方式。那麼今天從這篇文章開始,咱們就以實例html
的方式帶着你們由淺入深的開發屬於本身的插件庫。嘿嘿嘿,廢話少說,進入正題。直接上實際效果圖:java
你們看到了吧,這是一個下拉菜單插件,在咱們平常開發中,系統提供的可能有時讓咱們以爲不是很美觀而且功能有限,形成用戶數組
的體驗形式以及用戶的可交互性不是很好,因此今天模擬一個嘿嘿嘿。下面就具體分析一下吧。app
(二),實例分析dom
(1),首先肯定這個插件作什麼事。下面看一下插件的調用方式,以及配置參數說明。以下代碼:ide
1 $(function(){ 2 var itemSelector = new ItemSelector($("#item-selector"),{ 3 currentText : "Please Choose Item" , 4 items : [ 5 { 6 text : "JavaScript" , 7 value : "js" , 8 disabled : "1" 9 } , 10 { 11 text : "Css" , 12 value : "css" , 13 disabled : "0" 14 } , 15 { 16 text : "Html" , 17 value : "html" , 18 disabled : "0" 19 } 20 ] , 21 mode : "0" , // 爲"1"時支持checkbox多選模式 22 change : function(value){ 23 // put your code here 24 } 25 }) ; 26 itemSelector.init() ; 27 setTimeout(function(){ 28 console.log(itemSelector.getCurrentValue()) ; // 測試 獲取當先選中項 29 },2000) ; 30 }) ;
「var itemSelector = new ItemSelector()」裏面包含兩個參數,第一個是dom節點對象,第二個是插件參數選項,"currentText"表明「ItemSelector「插件中,選中文本顯示區域的文字描述。函數
」items「是一個數組,裏面包含的是「ItemSelector」項目的屬性,包括文字描述,選項值,」disabled「表明列表條目的可顯度,0表明顯示,1表明不可顯示。學習
」change「表明選中時的操做回調函數,選項數據會以參數的形式進行回傳。
(2),所涉的功能有哪些
可顯的效果圖以下:
不可顯的效果圖以下:
兩者的區別是:不可現狀態數據不會回傳,懸浮上去不會有任何效果。
三),完整代碼以供學習,本代碼已通過測試,包括目錄結構以及相關的文件。
(1),html
1 <body> 2 <div class="dxj-ui-hd"> 3 大熊君{{bb}} - DXJ UI ------ ItemSelector 4 </div> 5 <div class="dxj-ui-bd"> 6 <div id="item-selector"> 7 <div class="title"> 8 <div></div><span>↓</span> 9 </div> 10 <div class="content"> 11 <div class="items"> 12 13 </div> 14 </div> 15 </div> 16 </div> 17 </body>
(2),css
1 /* item-selector */ 2 3 #item-selector { 4 margin : 0 auto; 5 width : 220px ; 6 overflow:hidden; 7 border:2px solid #ccc; 8 } 9 #item-selector .title { 10 border-bottom:1px solid #ccc; 11 overflow:hidden; 12 } 13 #item-selector .title div { 14 width:190px; 15 border:0px ; 16 color:#999; 17 font-family: arial ; 18 font-size: 14px; 19 height:28px; 20 line-height:28px; 21 float:left; 22 cursor:pointer; 23 } 24 #item-selector .title span { 25 display:block; 26 height:30px; 27 line-height:30px; 28 width:29px; 29 float:left; 30 text-align:center; 31 border-left:1px solid #ccc; 32 cursor:pointer; 33 } 34 #item-selector .content { 35 width : 220px ; 36 overflow:hidden; 37 } 38 #item-selector .content .items { 39 overflow:hidden; 40 } 41 #item-selector .content .items div { 42 padding-left:20px; 43 width : 200px ; 44 height:32px; 45 line-height:32px; 46 font-family: "微軟雅黑" ; 47 font-size: 14px; 48 font-weight:bold; 49 cursor:pointer; 50 } 51 .item-hover { 52 background:#3385ff; 53 color:#fff; 54 }
(3),"ItemSelector.js"
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 ; // 數據遊標 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")) ; } ;
(四),最後總結
(1),面向對象的思考方式合理分析功能需求。
(2),以類的方式來組織咱們的插件邏輯。
(3),不斷重構上面的實例,如何進行合理的重構那?不要設計過分,要遊刃有餘,推薦的方式是過程化設計與面向對象思想設計相結合。
(4),下篇文章中會擴展相關功能,好比「mode」這個屬性,爲"1"時支持checkbox多選模式,如今只是默認下拉模式。
哈哈哈,本篇結束,未完待續,但願和你們多多交流夠溝通,共同進步。。。。。。呼呼呼……(*^__^*)