当前位置: 王朝网络 >> other >> 特效工具：模仿combox(select)控件

特效工具：模仿combox(select)控件

王朝other·作者佚名 2006-11-23

不用整天为美化select控件烦恼了。运行代码框<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> simulate combox control - http://www.never-online.net </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style>body, input{ font-family: verdana; font-size: 9pt;}h1{ font-family: tahoma; font-size: 22pt; text-align: left;}pre{ font-size: 9pt; font-family: verdana; border: 1px solid #006600; width: 400px; padding: 10px; background: #ffffff; color: #006600;}.CtlSelect{ border: 1px solid #006600; font-family: verdana; height: 20px; color: #006600; background: #ffffff; /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/}.selected{ background: #006600; color: #ffffff; height: 20px;}.unselected{ height: 20px; color: #006600; line-height: 120%; border-bottom: 1px solid #006600;}.CtlSelect1{ border: 1px solid #003399; font-family: verdana; height: 20px; color: #003399; background: #ffffff; /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/}.selected1{ background: #003399; color: #ffffff; height: 20px;}.unselected1{ height: 20px; color: #003399; line-height: 120%; border-bottom: 1px solid #003399;}.CtlSelect2{ border: 1px solid #990000; font-family: verdana; height: 20px; color: #990000; background: #ffffff; /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/}.selected2{ background: #990000; color: #ffffff; height: 20px;}.unselected2{ height: 20px; color: #990000; line-height: 120%; border-bottom: 1px solid #990000;}.copyright{ margin-top: 10px; font-size: 9pt; text-align: center; color: #333; font-weight: bold;}</style></HEAD><BODY><SCRIPT LANGUAGE="JavaScript"><!--//-------------------------------------------------------------// @ Module: simulate select control, IE only.// @ Debug in: IE 6.0// @ Script by: blueDestiny, never-online// @ Updated: 2006-3-22// @ Version: 1.0 apha// @ Email: blueDestiny [at] 126.com// @ Website: http://www.never-online.net// @ Please Hold this item please.//// API// @ class: simulateSelect()//// @ object.style(ctlStyle[,selStyle][,unselStyle])// ctlStyle: main control combox css class name// selStyle: when mouseover or option focus css class name// unselStyle: options blur's css class name//// @ object.width=(widthPX)// widthPX must be a digit number.//// @ object.height=(heightPX)// heightPX must be a digit number.//// @ object.getValue(ctlSelID)// ctlSelID is the unique select control ID//// -------------- for the next Version ----------// @ object.readOnly = (blnReadOnly)// blnReadOnly must be a boolean type or a number type.// @ object.addEvent(w, h)// w: fire handler's event.// h: handler function.//-------------------------------------------------------------function $(objID){ return document.getElementById(objID);};function Offset(e){ var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth; var h = e.offsetHeight-2; while(e=e.offsetParent) { t+=e.offsetTop; l+=e.offsetLeft; } return { top : t, left : l, width : w, height : h }}//-----------------------------------------------function simulateSelect() { with(this){ this.IDs = []; this.name = this; // property for beta Version // can editable combox this.readonly = true; this.height = 20; this.width = null; this.ctlStyle = "CtlSelect"; this.selStyle = "selected"; this.unselStyle = "unselected"; this.elementPrefix = "e__"; this.inputPrefix = "i__"; this.containerPrefix = "c__"; this.buttonPrefix = "b__"; return this;}};simulateSelect.prototype.init = function(ctlSelIDs) { with(this){ eval(name).append(ctlSelIDs); eval(name).simulates();}};simulateSelect.prototype.style = function() { with(this){ ctlStyle = arguments[0]; selStyle = arguments[1]; unselStyle = arguments[2];}};//-----------------------------------------------simulateSelect.prototype.append = function(ctlSelIDs) { with(this){ if( ctlSelIDs.indexOf(",")>0 ) { var arrCtlSel = ctlSelIDs.split(","); for(var i=0; i<arrCtlSel.length; i++) { eval(name).IDs.push(arrCtlSel[i]); } } else { eval(name).IDs.push(ctlSelIDs); }}};simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this){ // here compatible mf. var el = e ? e.srcElement : e.target; if( el.id.indexOf(elementPrefix)>-1 || el.id.indexOf(inputPrefix)>-1 || el.id.indexOf(containerPrefix)>-1 || el.id.indexOf(buttonPrefix)>-1 ) { return; } else { for(var i=0; i<eval(name).IDs.length; i++) if( $(containerPrefix + IDs[i]) ) $(containerPrefix + eval(name).IDs[i]).style.display = "none"; }}};simulateSelect.prototype.simulates = function() { with(this){ for(var i=0; i<IDs.length; i++) eval(name).simulate(IDs[i]);}};simulateSelect.prototype.simulate = function(ctlSelID) { with (this){ var input; var button; var object; var offset; object = $(ctlSelID); offset = Offset(object); input = document.createElement("INPUT"); button = document.createElement("BUTTON"); button.setAttribute("id", buttonPrefix + ctlSelID); //button.value = "⊿"; button.value = "6"; button.style.fontFamily = "Webdings, Marlett"; button.style.background = ""; button.onclick = input.onclick = function() { this.blur(); eval(name).expand(ctlSelID, offset); } input.onselectstart = function() { eval(name).expand(ctlSelID, offset); event.returnValue = false; }; input.setAttribute("id", inputPrefix + ctlSelID); input.title = button.title = "click expand options"; input.style.cursor = button.style.cursor = "default"; input.className = button.className = ctlStyle; input.style.width = (width>0 ? width : object.offsetWidth); height ? input.style.height=button.style.height=height : ""; input.value = object[0].text; if( readonly==true ) input.readOnly=true; // this method is only IE. object.insertAdjacentElement("afterEnd",button); object.insertAdjacentElement("afterEnd",input); object.style.display = 'none';}};simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this){ var div, btn_off; var object = $(ctlSelID); if( !$(containerPrefix + ctlSelID) ) { div = document.createElement("DIV"); div.style.position = "absolute"; div.style.display = "block"; div.setAttribute("id", containerPrefix + ctlSelID); div.className = ctlStyle; div.style.left = offset.left; div.style.top = offset.top + offset.height; div.style.width = (width ? width : offset.width) + 20; div.style.height = offset.height; document.body.appendChild(div); for(var i=0; i<object.length; i++) { div = document.createElement("DIV"); div.setAttribute("id", div.id = elementPrefix + ctlSelID + i); div.style.cursor = "default"; if( object[i].text==$(inputPrefix + ctlSelID).value ) div.className = selStyle; else div.className = unselStyle; div.innerText = div.title = object[i].text; div.style.height = height; div.setAttribute("value", object[i].value); div.onmouseover = function() { for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++) { if($(containerPrefix + ctlSelID).childNodes[j]==this) $(containerPrefix + ctlSelID).childNodes[j].className = selStyle; else $(containerPrefix + ctlSelID).childNodes[j].className = unselStyle; } }; div.onclick = function() { $(inputPrefix + ctlSelID).value = this.innerText; $(containerPrefix + ctlSelID).style.display = "none"; }; $(containerPrefix + ctlSelID).appendChild(div); } return; } if( $(containerPrefix + ctlSelID).style.display=="none" ) { for(var i=0; i<object.length; i++) { if( object[i].text==$(inputPrefix + ctlSelID).value ) $(elementPrefix + ctlSelID + i).className = selStyle; else $(elementPrefix + ctlSelID + i).className = unselStyle; } $(containerPrefix + ctlSelID).style.display="block"; return; } if( $(containerPrefix + ctlSelID).style.display=="block" ) { $(containerPrefix + ctlSelID).style.display="none"; return; }}};simulateSelect.prototype.getValue = function(ctlSelID) { with(this){ if( $(inputPrefix + ctlSelID) ) return $(inputPrefix + ctlSelID).value; else return null;}};simulateSelect.prototype.addEvent = function(w, h) { with(this){}};//-----------------------------------------------//window.onerror = Function("return true;");// IE only.document.attachEvent("onmousedown", function() { a.checkupOnMouseDown(event); b.checkupOnMouseDown(event); c.checkupOnMouseDown(event) } [1] [2] 下一页

点击展开全文

上一篇：流量值几个钱？什么流量更值钱？

下一篇：从动网DV7.1Access转换到Discuz4.1

免责声明：本文为网络用户发布，其观点仅代表作者个人观点，与本站无关，本站仅提供信息存储服务。文中陈述内容未经本站证实，其真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

没有找到您想要的？点此查看更多相关文章
相关文章▶

2023年上半年GDP全球前十五强
百态 2023-10-24

美众议院议长启动对拜登的弹劾调查
百态 2023-09-13

上海、济南、武汉等多地出现不明坠落物
探索 2023-09-06

印度或要将国名改为“巴拉特”
百态 2023-09-06

男子为女友送行，买票不登机被捕
百态 2023-08-20

手机地震预警功能怎么开？
干货 2023-08-06

女子4年卖2套房花700多万做美容：不但没变美脸，面部还出现变形
百态 2023-08-04