去掉了灰色倒三角的漂亮下拉列表-Dreamweaver教程

2024-09-12 12:29:51

字体：大中小

来源：转载

供稿：网友

<html>
<head><title>漂亮的下拉框</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script>
// viaselect environment constants
var 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 variables
var 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>