效果圖：
剛開始想實(shí)現(xiàn)這個(gè)效果，發(fā)現(xiàn)DropDownList控件自己沒有這個(gè)功能。于是百度了一下，資料挺多的，就是沒有我想要的。最后沒辦法，只好在某個(gè)大型的門戶網(wǎng)站上扣了，終于扣下來了。在次跟大家共享一下。
一共需要另外的兩個(gè)文件，一個(gè)Combox.js和一個(gè)Combox.css文件。其代碼在下邊，另外需要在aspx頁面的<head></head>里加入
<link rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="/js/Combox.js"></script>
兩行代碼，一行是引入css樣式表，一行是引入js文件，文件路徑可以自定義。此外，還需要寫一段js代碼，注冊(cè)一下DropDownList控件。代碼如下：
<script language="javascript" type="text/javascript">
//注冊(cè)select
//DropDownList1為DropDownList控件的Id,300為線框顯示的寬度，280為箭頭顯示的寬度
new Combox("DropDownList1",300,280);
</script>
ok,這樣下來，就可以實(shí)現(xiàn)上圖的效果了。
Combox.js文件代碼：
Code
Function.prototype.BindForEvent = function()
{
var __m = this, object = arguments[0], args = new Array();
for(var i = 1; i < arguments.length; i++)
{
args.push(arguments[i]);
}
return function(event)
{
return __m.apply(object, [( event || window.event)].concat(args));
}
};
var Class = {
create: function() {
return function() {
this.init.apply(this, arguments);
}
}
}
Object.extend = function(destination, source)
{
for (var property in source)
{
destination[property] = source[property];
}
return destination;
}
function Offset(e)
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
var f ='';
while(e=e.offsetParent)
{
f+= (e.id || e.className || e.tagName) +e.offsetTop + "---";
t+=e.offsetTop;
l+=e.offsetLeft;
}
//alert(f);
return {top : t,left : l,width : w,height : h}
}
function $()
{
var target = arguments[0];
if(typeof target == "object")
{
return target;
}
return document.getElementById(target);
}
var Comboxs = [];
var Combox = Class.create();
Combox.prototype = {
DrpID:'',
offset:null,
DrpList:null,
SetHeight:22, //高
box:null,
input:null,
Btn:null,
Optionsbox:null,
seledOption:null,
seledText:'',
seledValue:'',
bJoin:false,//是否聯(lián)動(dòng)
JoinID:null, //聯(lián)動(dòng)對(duì)象ID
w:0,
inputW:0,
s:1, // 0 編輯頁使用 1列表頁顯示
NumOption:0,
init:function(objID,w,inputW,s){
this.s = s || 0;
this.DrpID =objID
this.DrpList = $(objID);
if( !this.DrpList) return;
this.w = w;
this.inputW = inputW;
//this.offset = Offset(this.DrpList);
Comboxs.push([this.DrpID,this]);
if(this.DrpList.getAttribute("joinDrp") != null && this.DrpList.getAttribute("joinDrp")!= "")
{
this.bJoin = true;
this.JoinID = this.DrpList.getAttribute("joinDrp");
}
this.CreateBox();
},
CreateBox:function()
{
var Div = document.createElement("DIV");
if(this.s == 0 )
{
Div.className = "DrpBox_normal";
}
else
{
Div.className = "sDrpBox_normal";
}
Div.setAttribute("id",this.DrpList.id+"_"+"BOX");
Div.style.width=this.w+"px";
if(this.DrpList.style.display == 'none' )
{
Div.style.display = 'none';
}
this.DrpList.style.display = 'none';
this.box = Div;
var parentobj = this.DrpList.parentNode;
if( !parentobj ) return;
parentobj.insertBefore(Div,this.DrpList);
this.CreateInput();
this.CreateButton();
this.CreateOptions();
},
CreateInput:function()
{
var Div = document.createElement("DIV");
//Div.style.position ="absolute";
Div.setAttribute("id",this.DrpList.id+"_"+"INPUT");
Div.className = "DrpInput_normal";
Div.style.width =this.inputW+"px";
Div.style.overflow ='hidden';
this.box.appendChild(Div);
this.input = Div;
this.input.onmouseout = this.HidOptionBoxOutInput.BindForEvent(this.input,this);
},
CreateButton:function()
{
var Div = document.createElement("DIV");
Div.className = "DrpBtn";
Div.setAttribute("id",this.DrpList.id+"_"+"Btn");
this.Btn = Div;
this.box.appendChild(Div);
this.Btn.onmouseout = this.HidOptionBoxOutInput.BindForEvent(this.Btn,this);
},
CreateOptions:function()
{
this.Optionsbox = null;
var Div = document.createElement("DIV");
Div.style.display = 'none';
Div.style.width =this.w+"px";
Div.className = "DrpOptionsBox";
Div.setAttribute("id",this.DrpList.id +"_"+ "Optionsbox");
if( ! browser.msie)
{
var f = Offset(this.box);
Div.style.top = f.top+document.documentElement.scrollTop + this.SetHeight +"px";
Div.style.left = f.left+"px";
}
var parentobj = this.DrpList.parentNode;
if( !parentobj ) return;
parentobj.insertBefore(Div,this.DrpList);
this.Optionsbox = Div;
var Nums = this.DrpList.options.length;
this.NumOption = Nums;
for(var i=0;i< Nums;i++)
{
var DivOp = document.createElement("DIV");
DivOp.innerHTML = this.DrpList.options[i].innerHTML;
DivOp.setAttribute("value",this.DrpList.options[i].value);
DivOp.setAttribute("index",i);
DivOp.style.cursor = "default";
if(this.DrpList.options[i].selected )
{
DivOp.setAttribute("selected","true");
DivOp.className = "DrpOptionsSeled";
this.seledOption = DivOp;
this.seledText =DivOp.innerHTML;
this.seledValue = DivOp.getAttribute("value");
this.input.innerHTML = this.seledText;
}
else
{
DivOp.setAttribute("selected","false");
DivOp.className = "DrpOptions";
}
Div.appendChild(DivOp);
DivOp.onmouseover = this.Option_onMouseover.BindForEvent(DivOp,DivOp,this);
DivOp.onmouseout = this.Option_onMouseout.BindForEvent(DivOp,DivOp,this);
DivOp.onclick = this.Option_onClick.BindForEvent(DivOp,DivOp,this);
}
if( Nums > 6 )
{
Div.style.overflow="auto";
Div.style.height= this.SetHeight*6+"px";
}
else
{
Div.style.height =this.SetHeight*Nums +"px";
}
this.Optionsbox.onmouseout = this.HidOptionBoxEnt.BindForEvent(this.box,this);
this.input.onclick = this.ShowOptionBox.BindForEvent(this.input,this);
this.Btn.onclick = this.ShowOptionBox.BindForEvent(this.input,this);
},
Option_onMouseover:function()
{
var obj = arguments[1];
if( obj.className == "DrpOptionsSeled" )
{
return;
}
else
{
obj.className = "DrpOptionsOver";
}
},
Option_onMouseout:function()
{
var obj = arguments[1];
if( obj.className == "DrpOptionsSeled" )
{
return;
}
else
{
obj.className = "DrpOptions";
}
},
CloseCombox:function(ojbID)
{
for(var i=0;i<Comboxs.length;i++)
{
if(Comboxs[i][0] == ojbID )
{
continue;
}
if( Comboxs[i][1].Optionsbox.style.display == '')
{
Comboxs[i][1].Optionsbox.style.display ='none';
}
}
},
Option_onClick:function()
{
var opt = arguments[1];
var obj = arguments[2];
var sel = opt.getAttribute("selected");
if( sel == 'false' )
{
obj.seledOption.setAttribute("selected","false");
obj.seledOption.className = "DrpOptions";
opt.setAttribute("selected","true");
opt.className = "DrpOptionsSeled";
obj.seledOption = opt;
obj.seledText =opt.innerHTML;
obj.seledValue = opt.getAttribute("value");
obj.input.innerHTML = obj.seledText;
}
var i = parseInt(opt.getAttribute("index"));
obj.DrpList.options[i].selected = true;
obj.HidOptionBox(obj);
if( sel == 'false' )
{
if( obj.DrpList.onchange)
{
obj.DrpList.onchange();
}
if(obj.bJoin)
{
for(var i=0;i<Comboxs.length;i++)
{
if ( obj.JoinID == Comboxs[i][0] )
{
Comboxs[i][1].CreateOptions();
break;
}
}
}
}
if(obj.DrpList.onblur)
{
obj.DrpList.onblur(obj.DrpList);
}
},
ShowOptionBox:function()
{
var obj = arguments[1];
obj.CloseCombox(obj.DrpID); //關(guān)閉打開得
if( obj.Optionsbox.style.display == '')
{
obj.HidOptionBox(obj);
if(obj.DrpList.onblur)
{
obj.DrpList.onblur(obj.DrpList);
}
return;
}
obj.Optionsbox.style.display = '';
if(obj.DrpList.onfocus)
{
obj.DrpList.onfocus(obj.DrpList);
}
if(this.s == 0 )
{
obj.box.className ="DrpBox_focus";
}
},
HidOptionBox:function()
{
var obj = arguments[0];
obj.Optionsbox.style.display = 'none';
if(this.s == 0 )
{
obj.box.className ="DrpBox_normal";
}
},
IsOptionsboxUp:function()
{
alert(1);
},
HidOptionBoxEnt:function()
{
var obj = arguments[1];
var evt = arguments[0];
var boxOffset = Offset(obj.box);
var left =boxOffset.left;
var tops =boxOffset.top;
var w = boxOffset.width;
var h =obj.SetHeight*obj.NumOption;
var scrlTop = document.documentElement.scrollTop;
if(obj.NumOption > 6 )
{
h=obj.SetHeight*6;
}
if(evt.clientX > left && evt.clientX < (left+w) && evt.clientY+scrlTop > tops+2 && evt.clientY+scrlTop < (tops+h+obj.SetHeight ))
{
return;
}
obj.Optionsbox.style.display = 'none';
if(obj.s == 0 )
{
obj.box.className ="DrpBox_normal";
}
if(obj.DrpList.onblur)
{
obj.DrpList.onblur(obj.DrpList);
}
},
HidOptionBoxOutInput:function()
{
var obj = arguments[1];
var evt = arguments[0];
var boxOffset = Offset(obj.box);
var left =boxOffset.left;
var tops =boxOffset.top;
var w = boxOffset.width;
var h = boxOffset.height;
var scrlTop = document.documentElement.scrollTop;
if(evt.clientX > left && evt.clientX < (left+w) && evt.clientY+scrlTop > tops+5 ){
return;
}
obj.Optionsbox.style.display = 'none';
if(obj.s == 0 ){
obj.box.className ="DrpBox_normal";
}
if(obj.DrpList.onblur){
obj.DrpList.onblur(obj.DrpList);
}
}
};
var userAgent = navigator.userAgent.toLowerCase();
var browser = {
opera: /opera/.test(userAgent),
msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
};
function getEvent(){
return window.event ? window.event:getEvent.caller.arguments[0];
};
function ResizeWin(){
if( !browser.msie){
for(var i=0;i<Comboxs.length;i++){
Comboxs[i][1].Optionsbox.style.top = Offset(Comboxs[i][1].box).top + 22+"px";
Comboxs[i][1].Optionsbox.style.left = Offset(Comboxs[i][1].box).left+"px";
}
}
}
if(!window.Event){
var Event = new Object();
}
Object.extend(Event,{
add:function(element,name,observe,userCapture){
if (name == 'keypress' &&
(navigator.appVersion.match(/Konqueror|Safari|KHTML/)
|| element.attachEvent))
name = 'keydown';
userCapture = userCapture || false;
if(element.addEventListener){
element.addEventListener(name,observe,userCapture);
}
else if(element.attachEvent){
element.attachEvent('on'+ name,observe);
}
}
})
Event.add(window,"resize",ResizeWin,true)
Combox.css文件代碼如下：
Code
.DrpBox_normal
{
background:url(/images/folder/bg_input.gif) repeat-x bottom; /*圖片路徑可以自定義*/
background-color:#ffffff;
height:22px;
line-height:22px;
border:1px solid #afdae6;
margin-left:2px;
color:#4d4b4b;
overflow:hidden;
}
.DrpBox_focus
{
background:url(/images/folder/bg_input.gif) repeat-x bottom; /*圖片路徑可以自定義*/
background-color:#ffffff;
height:20px;
line-height:20px;
border:1px solid #afdae6;
border-left:4px solid #33cc00;
color:#4d4b4b;
overflow:hidden;
}
.DrpBtn
{
width:20px;
height:22px;
line-height:22px;
float:left;
background-image:url(/images/folder/ico_drp_btn.gif); /*圖片路徑可以自定義*/
background-repeat:no-repeat;
background-position:center;
}
.DrpOptionsBox
{
margin-left:2px;
border:solid 1px #afdae6;
position:absolute;
background-color:White;
clear:both;
height:22px;
line-height:22px;
}
.DrpOptions
{
text-indent:2px;
height:22px;
line-height:22px;
clear:both;
overflow:hidden;
clear:both;
}
.DrpOptionsSeled
{
text-indent:2px;
background-color:#afdae6;
height:22px;
line-height:22px;
clear:both;
}
.DrpOptionsOver
{
text-indent:2px;
background-color:#d7ecf2;
height:22px;
line-height:22px;
clear:both;
}
.sDrpBox_normal
{
margin-left:2px;
background-color:#ffffff;
height:22px;
line-height:22px;
border:1px solid #afdae6;
border-left:1px solid #afdae6;
color:#4d4b4b;
overflow:hidden;
}
.DrpInput_normal
{
text-indent:4px;
background-color:#ffffff;
height:22px;
line-height:22px;
color:#4d4b4b;
overflow:hidden;
float:left;
}
用到的兩個(gè)圖片：
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
