无码av中文字幕一区二区三区,加勒比av一区二区三区

　分享我們的select控件設(shè)計(jì)過(guò)程

作者：abeet　時(shí)間： 2009-06-16　文檔類型：原創(chuàng)　來(lái)自：藍(lán)色理想

第 1 頁(yè) 分享我們的select控件設(shè)計(jì)過(guò)程 [1]
第 2 頁(yè) 分享我們的select控件設(shè)計(jì)過(guò)程 [2]
第 3 頁(yè) 分享我們的select控件設(shè)計(jì)過(guò)程 [3]

向1.0beta邁進(jìn):

看到上面示例中簡(jiǎn)陋的功能、淺白的代碼，相信很多人已經(jīng)開(kāi)始對(duì)本文以及本人表示不屑了，別急，上面只是熱身，真正的作品才剛剛開(kāi)始。

以上為止，這個(gè)自定義的select控件還只是移花接木的套路，接下來(lái)我們要實(shí)現(xiàn)這個(gè)控件的更多的功能，以完全替代原有的select控件，
最主要是刪除原有的select控件，并接管select的onchange事件。
在這兒有一點(diǎn)要特別說(shuō)明的是在我們我們ZCMS平臺(tái)中因?yàn)槭褂胊jax，所有的表單都不是傳統(tǒng)的submit方式提交的，而是用一個(gè)多維數(shù)組（new DataCollection）收集要提交的數(shù)據(jù)，然后發(fā)送（sendRequest）到服務(wù)器的。
所以在下面的控件實(shí)現(xiàn)中不考慮submit提交表單數(shù)據(jù)的情況。

運(yùn)行代碼框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style> body, table, input, textarea, select{ margin: 0; font-size: 12px; line-height:1.5; font-family: Tahoma, SimSun, sans-serif; } .zSelect { display:inline-block; *zoom: 1; *display: inline; position:relative; height:20px; *height:21px; vertical-align:middle; } .zSelect .inputText { color:#369; line-height: 17px; font-size:12px; background: #f7fafc; padding: 1px 17px 0 1px; border: 1px solid #68a; vertical-align: middle; cursor:default; height: 17px; margin:0; } .zSelect .arrowimg { display:inline-block; *zoom: 1; *display: inline; position:relative; cursor:pointer; width:18px; height:20px; left:-18px; margin-right:-18px; vertical-align: middle; outline:none; background: url(http://www.95time.cn/articleimg/2009/06/6794/arrow.gif); } .zSelect .arrowimg:hover { background: url(http://www.95time.cn/articleimg/2009/06/6794/arrow_over.gif); } .zSelectDisabled .inputText{border: 1px solid #999;color:#aaa;background: #eee;} .zSelectDisabled .arrowimg,.zSelectDisabled .arrowimg:hover{background: url(http://www.95time.cn/articleimg/2009/06/6794/arrow_disab.gif);} .optgroup { position:absolute; z-index:666; left:0; top:19px; _top:21px; color: #369; } .optgroup p{ margin:0;} .optgroup div.optionsDiv{ padding:1px; overflow: auto; overflow-x: hidden; max-height:300px; color: #369; border: 1px solid #678; background: #f7fafc; width:auto; z-index:888; } .optgroup a, .optgroup a:visited{ font-size:12px; text-decoration:none; cursor:default; display:block; color: #369; white-space: nowrap; padding:1px 3px 2px 6px; _padding:0 3px 0 6px; height:18px; min-width:2em; } .optgroup a:hover,.optgroup a.selected:hover{ color: #dff; text-decoration:none; background:#38d; } .optgroup a.selected,.optgroup a.selected:visited,.optgroup a:focus{ color: #eff; text-decoration:none; background:#49e; } </style> <script> var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1; var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1; function $(ele) { if (typeof(ele) == 'string'){ ele = document.getElementById(ele) if(!ele){ return null; } } return ele; } function getEvent(evt){ return window.event||evt; } function stopEvent(evt){//阻止一切事件執(zhí)行,包括瀏覽器默認(rèn)的事件 evt = getEvent(evt); if(!evt){ return; } if(isGecko){ evt.preventDefault(); evt.stopPropagation(); } evt.cancelBubble = true evt.returnValue = false; } function addEvent(w, e, f) { if (document.attachEvent) { w.attachEvent(('on'+e), f); } else { w.addEventListener(e, f, false); } } if(window.Event){//給FF添加IE專有的屬性和方法 Event.prototype.__defineSetter__("returnValue",function(b){// if(!b)this.preventDefault(); return b; }); Event.prototype.__defineSetter__("cancelBubble",function(b){// 設(shè)置或者檢索當(dāng)前事件句柄的層次冒泡 if(b)this.stopPropagation(); return b; }); Event.prototype.__defineGetter__("srcElement",function(){ var node=this.target; while(node.nodeType!=1)node=node.parentNode; return node; }); } if(window.HTMLElement){//給FF添加IE專有的屬性和方法 HTMLElement.prototype.__defineGetter__("parentElement",function(){ if(this.parentNode==this.ownerDocument)return null; return this.parentNode; }); HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){ var r=this.ownerDocument.createRange(); r.setStartBefore(this); var df=r.createContextualFragment(sHTML); this.parentNode.replaceChild(df,this); return sHTML; }); HTMLElement.prototype.__defineGetter__("outerHTML",function(){ var attr; var attrs=this.attributes; var str="<"+this.tagName; for(var i=0;i<attrs.length;i++){ attr=attrs[i]; if(attr.specified) str+=" "+attr.name+'="'+attr.value+'"'; } if(!this.canHaveChildren) return str+">"; return str+">"+this.innerHTML+"</"+this.tagName+">"; }); HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){ switch(this.tagName.toLowerCase()){ case "area": case "base": case "basefont": case "col": case "frame": case "hr": case "img": case "br": case "input": case "isindex": case "link": case "meta": case "param": return false; } return true; }); HTMLElement.prototype.__defineSetter__("innerText",function(sText){ var parsedText=document.createTextNode(sText); this.innerHTML=parsedText; return parsedText; }); HTMLElement.prototype.__defineGetter__("innerText",function(){ var r=this.ownerDocument.createRange(); r.selectNodeContents(this); return r.toString(); }); } var $E = {}; $E.getParent = function(tagName,ele){ ele = ele || this; ele = $(ele); while(ele){ if(ele.tagName.toLowerCase()==tagName.toLowerCase()){ return $(ele); } ele = ele.parentNode; } return null; } var Selector = {}; Selector.initCtrl = function(ele){ ele = $(ele); var id = ele.id; var disabled = ele.disabled; var input = ele.getAttribute("input"); Selector.initHTML(ele); ele = $(id); Selector.initMethod(ele); if(ele.Items.length>10){ $(id+"_list").style.height = "15em"; } ele.disabled = disabled; Selector.setDisabled(ele,ele.disabled); ele.input = input; } Selector.showList = function(ele){ ele = $E.getParent("div",ele); if(Selector.showFlag&&Selector.showingID == ele.id){ Selector.close(); } else if(Selector.showFlag&&Selector.showingID != ele.id){ Selector.close(); $(ele.id+"_div").style.display=''; ele.style.zIndex='999'; ele.Items[ele.selectedIndex].className = "selected"; Selector.showingID = ele.id; Selector.showFlag = true; } else if(!Selector.showFlag){ $(ele.id+"_div").style.display=''; ele.style.zIndex='999'; ele.Items[ele.selectedIndex].className = "selected"; Selector.showingID = ele.id; Selector.showFlag = true; } } Selector.onArrowMouseOver = function(ele){ var div = ele.parentNode; div.options[div.selectedIndex].className = ""; //鼠標(biāo)移入，在這兒可以對(duì)控件的外觀作更多的改變 div.textField.style.borderColor = "#0099ee"; } Selector.onArrowMouseOut = function(ele){ var div = ele.parentNode; //鼠標(biāo)移出 div.textField.style.borderColor = "#6688aa"; } Selector.onItemClick = function(ele,flag){ var id = ele.parentNode.id; id = id.substring(0,id.lastIndexOf("_")); var div = $(id); var oldValue = div.value; div.textField.value = ele.innerText; div.ItemClickFlag = true; if(isIE){ div.value = ele.getAttribute("value"); }else{ div._value = ele.getAttribute("value"); } var items = ele.parentNode.childNodes; for(var i=0;i<items.length;i++){ items[i].className = ""; if(items[i]==ele){ div._selectedIndex = i; if(isIE){ div.selectedIndex = i } } } div.ItemClickFlag = false; ele.className = "selected"; if(!(div.style.display=="none")){ div.focus(); } if(oldValue!=ele.getAttribute("value")){ try{ Selector.invokeOnChange(div); }catch(ex){alert("Selector.invokeOnChange():"+ex.message);}; } Selector.close(); } Selector.close = function(){ if(Selector.showingID&&Selector.showFlag){ $(Selector.showingID+"_div").style.display="none"; $(Selector.showingID).style.zIndex='66'; Selector.showingID = null; Selector.showFlag = false; } } Selector.onItemMouseOver = function(ele){ var id = ele.parentNode.id; id = id.substring(0,id.lastIndexOf("_")); var div = $(id); div.options[div.selectedIndex].className = ""; ele.className = "selected"; } Selector.onIEDisabled = function(id){ Selector.setDisabled($(id),$(id).disabled); } Selector.setInput = function(ele,flag){//設(shè)置文本框是否可輸入 if(!flag||flag=="false"){ if(isIE){ ele.textField.onselectstart = stopEvent; ele.textField.onmousedown = stopEvent; }else{ ele.textField.style.MozUserSelect = "none"; ele.textField.style.MozUserInput = "none"; } ele.textField.oncontextmenu = stopEvent; }else{ if(isIE){ ele.textField.onselectstart = null; ele.textField.onmousedown = null; }else{ ele.textField.style.MozUserSelect = ""; ele.textField.style.MozUserInput = ""; } } ele.textField.onkeydown = Selector.onKeyDown; } Selector.onKeyDown = function(evt){ evt = getEvent(evt); var txt = evt.srcElement; var div = txt.parentNode; if(evt.keyCode==37||evt.keyCode==38){ if(div.selectedIndex>0){ div.selectedIndex = div.selectedIndex-1; } }else if(evt.keyCode==39||evt.keyCode==40){ if(div.selectedIndex<div.length-1){ div.selectedIndex = div.selectedIndex+1; } } if(evt.keyCode!=9){ stopEvent(evt);//過(guò)濾tab鍵之外的其它鍵 } } Selector.invokeOnChange = function(_ele){ if(!_ele.InitFlag){ var _cv = _ele.getAttribute("changeEvent"); if(_cv){ eval(_cv); } } } Selector.setValueEx = function(ele,v,t){ ele = $(ele); ele.value = v; ele.textField.value = t; } Selector.setValue = function(ele,v){ var flag = false; for(var i=0;i<ele.Items.length;i++){ if(ele.Items[i].value == v){ ele.textField.value = ele.Items[i].innerText; ele._value = v; if(isGecko){ ele._selectedIndex = i; }else{ ele.ItemClickFlag = true; ele.selectedIndex = i; ele.ItemClickFlag = false; } flag = true; break; } } if(!flag&&ele.input){//如果值是文本框輸入的 ele.textField.value = v; ele._value = v; } Selector.invokeOnChange(ele); } Selector.setDisabled = function(ele,flag){ if(flag){ ele.textField.disabled = true; ele.arrow.onmouseover = stopEvent; ele.arrow.onmouseout = stopEvent; ele.arrow.onclick = stopEvent; ele.className = "zSelect zSelectDisabled"; ele.textField.onkeydown = stopEvent; }else{ ele.textField.disabled = false; ele.arrow.onmouseover = function(){Selector.onArrowMouseOver(this)}; ele.arrow.onmouseout = function(){Selector.onArrowMouseOut(this)}; ele.arrow.onclick = function(){Selector.showList(this);}; ele.className = "zSelect"; ele.textField.onkeydown = Selector.onKeyDown; } } Selector.initHTML = function(ele){ var arr = []; var id = ele.id; var name = ele.getAttribute("name"); if(!name||name==""){ name = id; } var w = $(ele).clientWidth; ele.InitFlag = true; var changeEvent = ele.getAttribute("onchange"); if(!changeEvent){ changeEvent = ""; } if(isIE){ changeEvent = changeEvent.toString(); if(changeEvent.indexOf("{")>0){ changeEvent = changeEvent.substring(changeEvent.indexOf("{")+1,changeEvent.length-2); } } arr.push("<div id='"+id+"' ztype='selector' class='zSelect' changeEvent='"+changeEvent+"' style='"+ele.style.cssText+";'>"); arr.push("<input id='"+id+"_textField' type='text' class='inputText' name='"+ele.name+"' readonly style='width:"+w+"px;' value=''/>"); //arr.push("<a id='"+id+"_arrow' class='arrowimg' href='javascript:Selector.showList($(\""+id+"_arrow\"));' hidefocus></a>"); arr.push("<a id='"+id+"_arrow' class='arrowimg' href='javascript:void(0);' hidefocus></a>"); arr.push("<div id='"+id+"_div' class='optgroup' style='width:"+(w+20)+"px;display: none;'>"); arr.push("<div id='"+id+"_list' class='optionsDiv'>"); var items = ele.options; var selectedIndex = 0; for(var i=0;i<items.length;i++){ var str = ""; if(items[i].selected){ str = "class='selected'"; selectedIndex = i; } arr.push("<a href='javascript:void(0);' "+str+" hidefocus onclick='Selector.onItemClick(this);' value=\""+items[i].value+"\">"+(items[i].text==""?" ":items[i].text)+"</a>"); } arr.push("</div>"); arr.push("</div>"); arr.push("</div>"); ele.outerHTML = arr.join(''); ele = $(id); if(isGecko){ ele._selectedIndex = selectedIndex; }else{ ele.selectedIndex = selectedIndex; } } Selector.initMethod = function(ele){ ele.textField = ele.childNodes[0]; ele.name = ele.textField.name; ele.type = "select-one";//自定義類型，為取值函數(shù)$V(ele)預(yù)留。 ele.arrow = ele.childNodes[1]; ele.Items = $(ele.id+"_list").childNodes; if(ele.Items.length>0){ if(isIE){ ele.value = ele.Items[ele.selectedIndex].value; }else{ ele._value = ele.Items[ele._selectedIndex].value; } } //ele.form = $E.getParent("form",ele); ele.options = ele.Items; ele.length = ele.options.length; ele.add = function(text,value){ ele.Item.push([text,value]); } ele.onblur = function(){ this.textField.blur(); this.textField.style.borderColor = "#6688aa"; Selector.close(); } ele.onfocus = function(){ this.textField.focus(); this.textField.style.borderColor = "#0099ee"; } if(isIE){ Selector.initMethodIE(ele); }else{ Selector.initMethodGecko(ele); } ele.selectedIndex = ele.selectedIndex; ele.InitFlag = false; } Selector.initMethodIE = function(ele){ ele.onpropertychange = function(){//屬性改變時(shí)調(diào)用方法 var s = event.srcElement; var v = s[event.propertyName]; switch(event.propertyName.toLowerCase()){ case "disabled": Selector.setDisabled(s,v); break; case "selectedindex": if(!s.ItemClickFlag){//如果selectedindex發(fā)生了改變，并且不是由點(diǎn)擊引起的改變 Selector.onItemClick(s.Items[s.selectedIndex]); } break; case "input": Selector.setInput(s,s.input); break; case "value": if(!s.ItemClickFlag){//如果value發(fā)生了改變，并且不是由點(diǎn)擊引起的改變 Selector.setValue(s,v); } break; }; } } Selector.initMethodGecko = function(ele){ ele.__defineGetter__("disabled",function(flag){ return this.textField.disabled; }); ele.__defineSetter__("disabled",function(flag){ Selector.setDisabled(this,flag); }); ele.__defineGetter__("selectedIndex",function(){ return this._selectedIndex; }); ele.__defineSetter__("selectedIndex",function(index){ index = parseInt(index); if(index>=0&&index<this.Items.length){ this._selectedIndex = index }else{ return; } Selector.onItemClick(this.Items[this._selectedIndex]); }); ele.__defineGetter__("input",function(){ return this._input; }); ele.__defineSetter__("input",function(flag){ this._input = flag&&flag.toLowerCase()=="true"; Selector.setInput(this,this._input); }); ele.__defineGetter__("value",function(){ return this._value; }); ele.__defineSetter__("value",function(v){ Selector.setValue(this,v); }); } Selector.initAll = function(){ var eles = document.getElementsByTagName("select"); while(eles.length>0){//這種寫(xiě)法是因?yàn)閟elect控件被div替換，數(shù)量在不斷減少 if(eles[0].id=="")eles[0].id="select"+eles.length; Selector.initCtrl(eles[0]); eles = document.getElementsByTagName("select"); } } Selector.PageOnClick=function(evt){ if(Selector.showFlag){ var el = window.event?event.srcElement:evt.target; if(el.id.indexOf(Selector.showingID)>-1 || el.parentNode.id.indexOf(Selector.showingID)>-1) { return; } Selector.close(); } } addEvent(window,'load',Selector.initAll); addEvent(document,'click',Selector.PageOnClick); </script> <div>當(dāng)前站點(diǎn): <select id="select" name="select"> <option value="123123">政府門(mén)戶類演示站</option> <option value="456456">新聞門(mén)戶類演示站</option> <option value="789789">企業(yè)形象類演示站</option> </select> << 當(dāng)前站點(diǎn): <select id="select2" name="select2"> <option value="123123" selected="selected">政府門(mén)戶類演示站</option> <option value="456456">新聞門(mén)戶類演示站</option> <option value="789789">企業(yè)形象類演示站</option> </select> << </div> <div>當(dāng)前站點(diǎn): <select id="select3" name="select3" disabled="disabled"> <option value="123123">政府門(mén)戶類演示站</option> <option value="456456" selected="selected">新聞門(mén)戶類演示站</option> <option value="789789">企業(yè)形象類演示站</option> </select> << 當(dāng)前站點(diǎn): <select id="select4" name="select4"> <option value="123123">政府門(mén)戶類演示站</option> <option value="456456">新聞門(mén)戶類演示站</option> <option value="789789" selected="selected">企業(yè)形象類演示站</option> </select> << </div>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

以上展示了zSelect的核心代碼，對(duì)控件的屬性如style、multiple、size、tabIndex；事件如onblur、onfocus、onkeydown、onmousedown……的處理過(guò)程有所省略。
這個(gè)zSelect控件的實(shí)現(xiàn)思路和技術(shù)在上面的代碼中都已有體現(xiàn)，功能上的完善，完全可以參考其它代碼實(shí)現(xiàn)，一個(gè)非侵入式的select.js就出樣出現(xiàn)了，那么事情就這么完了么？當(dāng)然沒(méi)有，繼續(xù)……

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁(yè) 分享我們的select控件設(shè)計(jì)過(guò)程 [1] 下一頁(yè) 分享我們的select控件設(shè)計(jì)過(guò)程 [3]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。

相關(guān)文章

更多相關(guān)鏈接

亞足聯(lián)新Logo的設(shè)計(jì)過(guò)程

使用控件模板定制控件的觀感

用javascript實(shí)現(xiàn)select的美化

招聘網(wǎng)站的幾個(gè)新控件

Js 按照MVC模式制作自定義控件


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門(mén)搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開(kāi)啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問(wèn)題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買(mǎi)真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛(ài)的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開(kāi)發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx