企业400电话
微网小程序
AI电话机器人
电商代运营
全 部 栏 目
企业400电话
网络优化推广
AI电话机器人
呼叫中心
网站建设
商标✡知产
微网小程序
电商运营
彩铃•短信
增值拓展业务
模仿combox(select)控件，不用为美化select烦恼了。
不用整天为美化select控件烦恼了。
1、可批量美化select控件。
2、可以有onchange句柄。
3、触发onchange的函数可带参数。
3、可以得到select的值。
4、可设置像select类似的滚动条（如大于或等于8个数目时出现滚动条）
5、可设置宽度和高度
API参考：
//首先生成一个simulateSelect的实例
//构造函数的第一个可选参数为触发onchange的函数，其它的为onchange函数的参数；
c = new simulateSelect(s1onchange, "never-online");
//设置select的CSS，第一个参数为控件的主要CSS、第二个为选中条目时的CSS、第三个为没有选中条目时的CSS
c.style("CtlSelect2", "selected2", "unselected2");
//设置select的宽度和高度；
c.width = 320;
c.height = 20;
//初始化参数为：select控件的ID，可以用逗号分离，进行批量转换；
c.init("s1,s2,s3");
下一版本将可修改combox
<!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(handlerFunction) { with(this) { this.IDs = []; this.name = this; this.value = null; this.onchangeArgs = []; this.onchange = handlerFunction; this.height = 20; this.width = null; this.number = null; this.ctlStyle = "CtlSelect"; this.selStyle = "selected"; this.unselStyle = "unselected"; this.elementPrefix = "e__"; this.inputPrefix = "i__"; this.containerPrefix = "c__"; this.buttonPrefix = "b__"; // property for beta Version // can editable combox this.readonly = true; if( arguments.length>0 ) for(var i=0; i0 ) { var arrCtlSel = ctlSelIDs.split(","); for(var i=0; i-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 + 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 = 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; 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; if( number ) { div.style.height = height * number; div.style.overflow = "auto"; } 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"; if( onchange value!=$(inputPrefix + ctlSelID).value ) { onchange.apply(this,onchangeArgs); value = $(inputPrefix + ctlSelID).value; } }; $(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) }); window.attachEvent("onload", function() { window.a = new simulateSelect(); a.style("CtlSelect", "selected", "unselected"); a.init("s1"); //------------------------------------------- window.b = new simulateSelect(); b.style("CtlSelect1", "selected1", "unselected1"); b.width = 300; b.number = 9; b.init("s2"); //------------------------------------------- window.c = new simulateSelect(s1onchange, "never-online", a.getValue('s1')); c.style("CtlSelect2", "selected2", "unselected2"); c.width = 320; c.init("s3"); }); function s1onchange(para, s) { alert("onchage handler fire " + para + s); } //--> </SCRIPT> <h1> simulate combox control </h1> <h4> demonstrate </h4> <p> normal select: <select id="s0"> <option value="- please select your options -"> - please select your options -</option> <option value="1">option1</option> <option value="2">option2</option> <option value="3">option3</option> <option value="4">option4</option> <option value="5">option5</option> </select> </p> <p> simulate select: <select id="s1"> <option value="- please select your options -"> - please select your options -</option> <option value="1">1option1</option> <option value="2">1option2</option> <option value="3">1option3</option> <option value="4">1option4</option> <option value="5">1option5</option> </select> </p> <p> scroll simulate select: <select id="s2"> <option value="- please select your options -"> - please select your options -</option> <option value="1">2option1</option> <option value="2">2option2</option> <option value="3">2option3</option> <option value="4">2option4</option> <option value="5">2option6</option> <option value="5">2option7</option> <option value="5">2option8</option> <option value="5">2option9</option> <option value="5">2option10</option> <option value="5">2option11</option> <option value="5">2option12</option> <option value="5">2option13</option> <option value="5">2option14</option> </select> </p> <p> onchange handler fire: <select id="s3"> <option value="- please select your options -"> - please select your options -</option> <option value="1">3option1</option> <option value="2">3option2</option> <option value="3">3option3</option> <option value="4">3option4</option> <option value="5">3option5</option> </select> </p> <button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2') + '\n\n' + c.getValue('s3'))" class="CtlSelect"> Get value </button> <button onclick="alert('next version')" class="CtlSelect">append item</button> <button onclick="alert('next version')" class="CtlSelect">remove item</button> <h4> description </h4> <pre> //------------------------------------------------------------- // @ 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. //------------------------------------------------------------- </pre> <div class="copyright"> Power By blueDestiny, never-online http://www.never-online.net </div> </BODY> </HTML>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
您可能感兴趣的文章:
jqTransform form表单美化插件使用方法
select下拉选择框美化实现代码(js+css+图片)
CSS 美化表格边框为凹陷立体效果的实现方法
css美化input file按钮的代码方法
css文本框与按钮美化效果代码
javascript 单选框，多选框美化代码
CSS 美化段落文本之首字下沉
用javascript实现select的美化的方法
在修改准备发的批量美化select+可修改select时，在非IE下发现了几个问题
select标签模拟/美化方法采用JS外挂式插件
上一篇：
韩国商业网站设计分析
下一篇：
【已解决】标签页刷新问题
相关文章
模仿combox(select)控件，不用为美化select烦恼了。
不用整天为美化select控件烦恼了。 1、可批量美化select控件。 2、可以有onchange句柄。 3、触发onchange的函数可带参数。 3、可以得到select的值。 4、可设置像select类似的滚动条（如大于或等模仿,combox,select,控件,不,...
汕头电销系统防封效果好吗
汕头电销系统防封效果好吗 拥有多条优质线路，规避封号风险！企业呼叫中心、业务系...
400800电话申请攻略：如何成功申请免费电话！
随着互联网的快速发展，越来越多的企业开始利用电话来进行客户服务和销售。而在电...
科大智能打电话机器人新闻（科大人工智能机器
本文目录一览：1、AI智能 电销机器人2、什么是智能 电销机器人3、合肥科大智能机器人...
北京不封号电销卡办理（北京不封号电销卡办理要多久）
本篇文章给咱们谈谈北京不封号电销卡处理，以及北京不封号电销卡处理要多久对应的...
浙江电力完成受理信通客服工单30万件
截至目前，186客服在2018年已完成信通客服工单受理30万件，其中故障报修类工单受理...
400电话虽然收费低但是作用大
虽然现在大加觉得400电话提供的服务比较普通了，但是在之前几年，那个时候网络还没...
详解Docker的持久化存储和数据共享
有些容器会自动产生一些数据，为了不让数据随着container的消失而消失，保证数据的安...
上城区营商服务中心推出“点餐式”服务，远传出品”定
企业点餐，政府办事 日前，上城首推的企业营商服务一件事自助点餐式办理政务服务上...
400是免费电话号码吗400电话是收费还是免费
400是免费电话号码吗400电话是收费还是免费以下内容由巨人小编整理发布。 不是，40...
外呼量大的电销公司用什么卡合适呢
我想买电销卡，却不知道找谁买？我是做房地产电销行业的，最近卡总封，该怎么解决...
北京专业群呼线路哪家好,呼叫中心软件哪里有-价格合理
北京专业群呼线路哪家好,呼叫中心软件哪里有你知道我的意思吗？你明白我在说什么吗...
常州外呼系统排名（常州外呼系统）
本篇文章给大家谈谈常州外呼系统排名，以及常州外呼系统对应的知识点，希望对各位...
怀化电话机器人外呼系统（外呼机器人 拨打企业电话 效
本文目录一览：1、电话外呼系统是什么意思?2、自动外呼机器人系统的优点都由哪些...
为什么要选择抖音代运营？厦门市抖音代运营有哪些技巧
很多的公司都在做抖音运营，没有请团队做抖音运营的，也请了抖音代运营团队，但是...
郑州电销机器人一般多少钱（电销机器人代理怎么样）
本篇文章给咱们谈谈郑州电销机器人一般多少钱，以及电销机器人署理怎么样对应的知...
模仿combox(select)控件，不用为美化select烦恼了。
不用整天为美化select控件烦恼了。 1、可批量美化select控件。 2、可以有onchange句柄。 3、触发onchange的函数可带参数。 3、可以得到select的值。 4、可设置像select类似的滚动条（如大于或等模仿,combox,select,控件,不,...
咨 询 客 服
咨 询 客 服