去掉了灰色倒三角的漂亮下拉列表----为中国网络技术提供点滴动力-iyit.net-易特网络技术！

　　通行证: 用户密码

域名空间　下载中心　 社区论坛　信息公告 my小屋

联系我们
设为首页
加入收藏

qq,asp,php,jsp,xml,sql,.net,编程程序网页图象建站经验私服


	当前位置：首页>>网页设计>>dreamweaver>>正文	新版上线！[旧版]

注:打开慢时请稍等

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

http://www.iyit.net 日期：2006-5-5 10:25:52 来源：中国站长学院点击：

【参加讨论】

<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="http://www.iyit.net/files/beyondpic/2006-5/5/065510254959326.gif" border=0 align=absmiddle>";
this.titletable.cells(2).innerhtml = "<img src="http://www.iyit.net/files/beyondpic/2006-5/5/065510254989768.gif" border=0 align=absmiddle>";
this.titletable.cells(3).appendchild(this.select);
this.titlewrapper = document.createelement(""
+ "<img src="http://www.iyit.net/files/beyondpic/2006-5/5/065510255038048.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="http://www.iyit.net/files/beyondpic/2006-5/5/065510255038048.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>

编辑：黑鹰　[发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇：javascript 对象与数组参考大全
下一篇：msagent 详细解说(一)
转载请注明来源：www.iyit.net
特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。

		相关文章