当前位置：首页 -> 网页设计 -> DREAMWEAVER -> 去掉了灰色倒三角的漂亮下拉列表

去掉了灰色倒三角的漂亮下拉列表

时间： 2021-07-31 作者：daque

<html><head><title>美丽的下拉框</title><meta http-equiv="content-type" content="text/html; charset=utf8"><script>// viaselect environment constantsvar ss_env = new object();ss_env.ie_version = new number(((window.navigator.appversion.split('; '))[1].split(' '))[1]);ss_env.cr = new object();ss_env.cr.reversebackground = '#e2519c';ss_env.cr.reversetext = 'white';ss_env.cr.border = '#d55c9a';ss_env.cr.borderactive = '#ff6cb7';ss_env.imgprefix = 'http://www.viafriend.com/images';ss_env.defaultheight = 20;ss_env.buttonwidth = 13;ss_env.optionsdivstyle = '' + ' display:none;' + ' z-index:10;' + ' position:absolute;' + ' border:1 solid '+ ss_env.cr.border+';' + ' background-color:white;' + ' scrollbar-face-color:#d4d0c8;' + ' scrollbar-shadow-color:white;' + ' scrollbar-highlight-color:#f6f5f4;' + ' scrollbar-3dlight-color:white' + ' scrollbar-darkshadow-color:#86837e;' + ' scrollbar-track-color:#f6f5f4;' + ' scrollbar-arrow-color:#86837e;';ss_env.optionnobrstyle = '' + ' font-size:12px;' + ' font-family:奔覆;';// sayselect variablesvar ss_var = new object();ss_var.divdummy = document.createelement("div");ss_var.selectlist = new array();ss_var.beventattached = false;

var ss_createdelements = new object();

attachevent("onunload", unloadobjects);

function ss_create (srchtml, listmax, bautodetect){ // property this.ssid = ss_var.selectlist.length; this.boriginalselect = (bautodetect && ss_env.ie_version < 5.5); this.select = ss_createelement(srchtml); this.selectedindex = this.select.selectedindex; this.options = this.select.options; this.width = parseint(this.select.style.width); this.height = (this.select.style.height) ? parseint(this.select.style.height) : ss_env.defaultheight; this.optionheight = this.height - 4; this.blistdown = (listmax && '-'==listmax.tostring().substr(0, 1)) ? false : true; this.listmax = (!isnan(parseint(listmax))) ? math.abs(listmax) : 100;

this.table; this.titlediv; this.titletable; this.titlewrapper; this.optionsdiv; this.optionswrapper; this.optionstable; this.bfocused = false; this.bexpanded = false; this.breverse = false;

// private method this.isthiseventtobecanceled = ss_isthiseventtobecanceled; this.toggletitle = ss_toggletitle; this.syncselectedindex = ss_syncselectedindex; this.toggleoptions = ss_toggleoptions; this.turnonoption = ss_turnonoption; this.turnoffoption = ss_turnoffoption; this.handlemousewheel = ss_handlemousewheel; this.handleovertitle = ss_handleovertitle; this.handleouttitle = ss_handleouttitle; this.handleoveroption = ss_handleoveroption; this.createtable = ss_createtable; this.createtitlediv = ss_createtitlediv; this.createoptionsdiv = ss_createoptionsdiv; this.createoptiontr = ss_createoptiontr; this.adjustoptionsdiv = ss_adjustoptionsdiv; this.syncoptions = ss_syncoptions; this.pressoption = ss_pressoption; this.moveoption = ss_moveoption; this.releaseoption = ss_releaseoption; this.presstitle = ss_presstitle; this.releasetitle = ss_releasetitle;

// public method this.display = ss_display; this.insertoption = ss_insertoption; this.deleteoption = ss_deleteoption; this.changeoption = ss_changeoption;

// initiate this.createtable(); this.select.setattribute('ss', this); if (!this.boriginalselect) this.select.onpropertychange = ss_handlepropertychange; ss_var.selectlist[this.ssid] = this;}function ss_display (){ document.write("<div id=ss_tempdiv></div>\n"); document.all.ss_tempdiv.appendchild(this.table); document.all.ss_tempdiv.removenode();}function ss_write (srchtml, listmax, bautodetect){ var oss = new ss_create(srchtml, listmax, bautodetect); oss.display(); return oss;}function ss_insertoption (value, innertext, idx){ var newoption = document.createelement("option"); ss_createdelements[ss_createdelements.length] = newoption; this.options.add(newoption, idx); newoption.innertext = innertext; newoption.value = value;

if (!this.boriginalselect) this.createoptiontr(idx); this.syncoptions(); this.adjustoptionsdiv(); this.syncselectedindex();}function ss_deleteoption (idx){ this.options.remove(idx); if (!this.boriginalselect) this.optionstable.deleterow(idx); this.syncoptions(); this.adjustoptionsdiv(); this.syncselectedindex();}function ss_changeoption (idx, value, innertext){ this.options[idx].value = value; this.options[idx].innertext = innertext; this.syncoptions(); this.syncselectedindex();}

except = ('number'==typeof(except)) ? except : -1;

if (ss_var.beventattached && bhastodetachevent) { document.detachevent('onmousedown', ss_blurexcept); document.detachevent('ondblclick', ss_blurexcept); ss_var.beventattached = false; }}function ss_syncselectedindex (){ this.selectedindex = this.select.selectedindex;

if (this.boriginalselect) return;

if (this.titletable.cells(0).childnodes(0).innertext != this.options[this.selectedindex].innertext) this.titletable.cells(0).childnodes(0).innertext = this.options[this.selectedindex].innertext; if (this.bexpanded) this.toggleoptions(false);}function ss_toggletitle (breverse){ this.breverse = ('undefined'!=typeof(breverse)) ? breverse: (!this.breverse); this.titletable.cells(0).style.backgroundcolor = this.breverse ? ss_env.cr.reversebackground : ''; this.titletable.cells(0).style.color = this.breverse ? ss_env.cr.reversetext : '';}function ss_toggleoptions (bexpanded, bstrict){ if (!bstrict && !this.bfocused) { ss_blurexcept(this.ssid); } this.bexpanded = ('undefined'!=typeof(bexpanded)) ? bexpanded: (!this.bexpanded); if (this.bexpanded) { this.adjustoptionsdiv(); this.optionsdiv.style.display = 'block'; if (!bstrict) { this.toggletitle(false); this.handleoveroption(this.selectedindex); } this.handleouttitle(); } else { this.optionsdiv.style.display = 'none'; if (!bstrict) { this.toggletitle(true); } } if (!bstrict) { this.bfocused = true;

if (!ss_var.beventattached) { document.attachevent('onmousedown', ss_blurexcept); document.attachevent('ondblclick', ss_blurexcept); ss_var.beventattached = true; } }}function ss_handlepropertychange (){ if ('propertychange'==window.event.type && 'selectedindex'==window.event.propertyname) { var oss = window.event.srcelement.ss; oss.syncselectedindex();

if (null != oss.select.onchange) oss.select.onchange(); }}function ss_handlemousewheel (event){ var idx = this.selectedindex; if ('mousewheel'==event.type && this.bfocused && this.breverse) { for (var i=0; i < event.wheeldelta; i += 120) idx--; for (var i=0; i > event.wheeldelta; i -= 120) idx++; } idx = math.max(idx, 0); idx = math.min(idx, this.options.length - 1); this.select.selectedindex = idx;}function ss_handleovertitle (){ if (this.bexpanded) return;

this.titletable.style.bordercolor = ss_env.cr.borderactive; this.titletable.cells(1).style.display = 'none'; this.titletable.cells(2).style.display = 'block';}function ss_handleouttitle (){ this.titletable.style.bordercolor = ss_env.cr.border; this.titletable.cells(2).style.display = 'none'; this.titletable.cells(1).style.display = 'block';}function ss_handleoveroption (idx){ for (var i=0; i < this.options.length; i++) { if (i==idx) this.turnonoption(i); else this.turnoffoption(i); }}function ss_turnonoption (idx){ this.optionstable.cells(idx).style.color = ss_env.cr.reversetext; this.optionstable.cells(idx).style.backgroundcolor = ss_env.cr.reversebackground;}function ss_turnoffoption (idx){ this.optionstable.cells(idx).style.color = ''; this.optionstable.cells(idx).style.backgroundcolor = '';}function ss_adjustoptionsdiv (){ if (this.boriginalselect) return;

this.optionsdiv.style.width = this.width; this.optionsdiv.style.height = math.min(this.options.length, this.listmax) * this.optionheight + 2; this.optionswrapper.style.height = this.options.length * this.optionheight; this.optionsdiv.style.overflowy = (this.options.length > this.listmax) ? 'scroll' : '';

var top = this.table.offsettop; var left = this.table.offsetleft; for (var el = this.table.offsetparent; 'body'!=el.tagname && 'absolute'!=el.style.position && 'relative'!=el.style.position; el = el.offsetparent) { if ('table' != el.tagname) { top += el.clienttop; left += el.clientleft; } top += el.offsettop; left += el.offsetleft; } this.optionsdiv.style.top = (this.blistdown) ? (top + this.height) : (top - parseint(this.optionsdiv.style.height)); this.optionsdiv.style.left = left;

this.titlewrapper.style.top = 0; this.titlewrapper.style.left = 0;}function ss_syncoptions (){ if (this.boriginalselect) return;

for (var i=0; i < this.options.length; i++) { this.optionstable.cells(i).setattribute('index', i); if (this.optionstable.cells(i).childnodes(0).innertext != this.options[i].innertext) this.optionstable.cells(i).childnodes(0).innertext = this.options[i].innertext; }}function ss_presstitle (event){ ss_cancelevent(event);

this.srcelementoflastmousedown = event.srcelement;

this.toggleoptions();}function ss_releasetitle (event){ ss_cancelevent(event);

if (this.isthiseventtobecanceled(event)) return;

this.srcelementoflastmousedown = null;}function ss_pressoption (event){ ss_cancelevent(event);

this.srcelementoflastmousedown = event.srcelement;}function ss_moveoption (event){ ss_cancelevent(event);

if (this.isthiseventtobecanceled(event)) return; if (!(event.offsetx >= 0 && event.offsetx <= this.optionstable.offsetwidth)) return;

this.handleoveroption(math.floor(event.offsety / this.optionheight));}function ss_releaseoption (event){ ss_cancelevent(event);

if (this.isthiseventtobecanceled(event)) return;

this.srcelementoflastmousedown = null;

if (event.offsetx >= 0 && event.offsetx <= this.optionstable.offsetwidth) { this.toggleoptions(false); this.select.selectedindex = math.floor(event.offsety / this.optionheight); }}function ss_createtable (){ this.table = ss_createelement("" + "<table border=0 cellpadding=0 cellspacing=0 style='table-layout:fixed; cursor:default'>" + "<tr><td></td></tr>" + "</table>" ); if (!isnan(this.width)) this.table.style.width = this.width; this.table.style.height = this.height;

if (!this.boriginalselect) { this.createtitlediv(); this.createoptionsdiv(); this.table.cells(0).appendchild(this.titlediv); this.table.cells(0).appendchild(this.optionsdiv); } else { this.table.cells(0).appendchild(this.select); }}function ss_createtitlediv (){ this.titlediv = ss_createelement("" + "<div style='position:relative; top:0; left:0;'>" + " <table border=0 cellpadding=0 cellspacing=1" + " height="+this.height + " bgcolor=white" + " style='table-layout:fixed; border:1 solid "+ss_env.cr.border+";'" + " onmouseover='ss_var.selectlist["+this.ssid+"].adjustoptionsdiv()'" + " >" + " <tr>" + " <td><nobr style='text-oveflow:hidden;"+ss_env.optionnobrstyle+"'></nobr></td>" + " <td width="+ss_env.buttonwidth+" align=center style='word-wrap:normal'></td>" + " <td style='display:none' width="+ss_env.buttonwidth+" align=center style='word-wrap:normal'></td>" + " <td style='display:none'></td>" + " </tr>" + " </table>" + "</div>" ); this.titletable = this.titlediv.childnodes(0); this.titletable.cells(0).childnodes(0).innertext = this.options[this.selectedindex].innertext; this.titletable.cells(1).innerhtml = "<img src='"+ss_env.imgprefix+"/btn_down.gif' border=0 align=absmiddle>"; this.titletable.cells(2).innerhtml = "<img src='"+ss_env.imgprefix+"/btn_down_s.gif' border=0 align=absmiddle>"; this.titletable.cells(3).appendchild(this.select); this.titlewrapper = document.createelement("" + "<img src='"+ss_env.imgprefix+"/img_blank.gif'" + " style='position:absolute; top:0; left:0; z-index:2; width:100%; height:"+this.height+";'" + " onmouseover='ss_var.selectlist["+this.ssid+"].handleovertitle()'" + " onmouseout='ss_var.selectlist["+this.ssid+"].handleouttitle(); ss_var.selectlist["+this.ssid+"].releasetitle(window.event);'" + " onmousedown='ss_var.selectlist["+this.ssid+"].presstitle(window.event)'" + " ondblclick='ss_var.selectlist["+this.ssid+"].presstitle(window.event); ss_var.selectlist["+this.ssid+"].releasetitle(window.event);'" + " onmouseup='ss_var.selectlist["+this.ssid+"].releasetitle(window.event)'" + " onmousewheel='ss_var.selectlist["+this.ssid+"].handlemousewheel(window.event)'" + " ondragstart='ss_cancelevent(window.event)'" + ">" ); ss_createdelements[ss_createdelements.length] = this.titlewrapper; this.titlediv.appendchild(this.titlewrapper);}function ss_createoptionsdiv (){ this.optionsdiv = ss_createelement("" + "<div style='"+ss_env.optionsdivstyle+"'" + " onscroll='ss_var.selectlist["+this.ssid+"].moveoption(window.event)'" + " onmousedown='ss_cancelevent(window.event)'" + ">" + " <table border=0 cellpadding=0 cellspacing=0 width=100% style='table-layout:fixed'>" + " </table>" + "</div>" ); this.optionstable = this.optionsdiv.childnodes(0); for (var i=0; i < this.options.length; i++) { this.createoptiontr(i); } this.syncoptions(); this.optionswrapper = document.createelement("" + "<img src='"+ss_env.imgprefix+"/img_blank.gif'" + " style='position:absolute; top:0; left:0; width:100%;'" + " onmousedown='ss_var.selectlist["+this.ssid+"].pressoption(window.event)'" + " onmousemove='ss_var.selectlist["+this.ssid+"].moveoption(window.event)'" + " onmouseup='ss_var.selectlist["+this.ssid+"].releaseoption(window.event)'" + " onmouseout='ss_var.selectlist["+this.ssid+"].releaseoption(window.event)'" + " ondragstart='ss_cancelevent(window.event)'" + ">" ); ss_createdelements[ss_createdelements.length] = this.optionswrapper; this.optionsdiv.appendchild(this.optionswrapper);}function ss_createoptiontr (idx){ idx = ('undefined'!=typeof(idx)) ? idx : this.options.length - 1; var optiontr = this.optionstable.insertrow(-1); var optiontd = document.createelement("<td height="+this.optionheight+"></td>"); ss_createdelements[ss_createdelements.length] = this.optionstd; optiontd.appendchild(document.createelement("<nobr style='"+ss_env.optionnobrstyle+"'></nobr>")); optiontr.appendchild(optiontd);}</script></head><body><script>ss_write("<select style='width:60;height:18px;font-size:12px' name=star>\n" +" <option value=\"\" selected>不限</option>\n"+"<option value=\"水瓶座\">水瓶座</option>"+"<option value=\"双鱼座\">双鱼座</option>"+"<option value=\"白羊座\">白羊座</option>"+"<option value=\"金牛座\">金牛座</option>"+"<option value=\"双子座\">双子座</option>"+"<option value=\"巨蟹座\">巨蟹座</option>"+"<option value=\"狮子座\">狮子座</option>"+"<option value=\"童贞座\">童贞座</option>"+"<option value=\"天琴座\">天琴座</option>"+"<option value=\"天蝎座\">天蝎座</option>"+"<option value=\"弓手座\">弓手座</option>"+"<option value=\"摩羯座\">摩羯座</option>" +"</select>\n");</script><br><script>ss_write("<select name='province' style='width:60;height:18px;font-size:12px'>\n"+"<option value=\"\" selected>都行</option>\n"+"<option value=\"北京\">北京</option>"+"<option value=\"上海\">上海</option>"+"<option value=\"天津\">天津</option>"+"<option value=\"重庆\">重庆</option>"+"<option value=\"安徽\">安徽</option>"+"<option value=\"福建\">福建</option>"+"<option value=\"甘肃\">甘肃</option>"+"<option value=\"广东\">广东</option>"+"<option value=\"广西\">广西</option>"+"<option value=\"贵州\">贵州</option>"+"<option value=\"海南\">海南</option>"+"<option value=\"河北\">河北</option>"+"<option value=\"黑龙江\">黑龙江</option>"+"<option value=\"河南\">河南</option>"+"<option value=\"湖北\">湖北</option>"+"<option value=\"湖南\">湖南</option>"+"<option value=\"内蒙古\">内蒙古</option>"+"<option value=\"江苏\">江苏</option>"+"<option value=\"江西\">江西</option>"+"<option value=\"吉林\">吉林</option>"+"<option value=\"辽宁\">辽宁</option>"+"<option value=\"宁夏\">宁夏</option>"+"<option value=\"青海\">青海</option>"+"<option value=\"山西\">山西</option>"+"<option value=\"陕西\">陕西</option>"+"<option value=\"山东\">山东</option>"+"<option value=\"四川\">四川</option>"+"<option value=\"江西\">江西</option>"+"<option value=\"新疆\">新疆</option>"+"<option value=\"新疆\">新疆</option>"+"<option value=\"云南\">云南</option>"+"<option value=\"浙江\">浙江</option>"+"<option value=\"其它\">其它</option>" +"</select>\n",8); </script></body></html>

去掉了灰色倒三角的漂亮下拉列表

相关推荐

推荐下载

热门阅览

最新排行