/**
* @author:熊水林(xionglb@163.com)
* @created:2009-8-6
* @lastModified:2009-8-7
* @version:1.0
* @CopyRight:本程序归为作者个人呕心力作,不属任何公司,其它任何个人和团体不得篡改、冒领,引用时请注明出处。
*
* @descript:
* 自定义下拉框,类型有:
* 普通的单选Select、带chckbox的多选Select
* 下拉出树型菜单、日期选择
*/
function Dropdown(textObj){
with(textObj.style){
height = "23";
}
this.srcObj = textObj;
}
Dropdown.prototype={
options : new Array(),
multiple : false,
focusColor : "#DDDDDD",
setLoader : function(dd){
this.loader = dd;
this.toUI();
},
toUI : function(){
var html = "<span style='position:absolute;background-color:transparent;border:solid 1px #88AACC;visibility:hidden'></span>";
this.srcObj.insertAdjacentHTML("AfterEnd", html);
this.dispObj = this.srcObj.nextSibling;
html = "<img src='dropdown_button_down.gif' height='23' width='14' border=0 align='absMiddle' οnclick='"+this.loader+".show();'>";
this.srcObj.insertAdjacentHTML("AfterEnd", html);
this.arrowImg = this.srcObj.nextSibling;
this.srcObj.insertAdjacentHTML("AfterEnd", "<input type='hidden'>");
this.valueObj = this.srcObj.nextSibling;
},
show : function(){
if (this.dispObj.style.visibility == "hidden"){
this.getShowStr();
this.initSelectedItem();
var pxy = getOffsetPosition(this.srcObj);
var bodyHeight = document.body.clientHeight+document.body.clientTop;
var top_ = pxy.y + this.srcObj.offsetHeight;
var offset = -1;
with(this.dispObj.style) {
zIndex = 9999;
visibility = "visible";
width = this.srcObj.offsetWidth + this.arrowImg.offsetWidth;
pixelLeft = pxy.x;
if (top_+height+document.body.scrollTop > bodyHeight){
pixelTop = pxy.y - height;
}else{
pixelTop = top_ + offset;
}
}
}else{
this.hide();
}
event.cancelBubble = true;
},
hide : function(){
this.dispObj.style.visibility = "hidden";
if (this.multiple){
var children = this.dispObj.childNodes;
var value = "";
var text = "";
for (var i=0,len=children.length; i<len; i++){
if (children[i].childNodes[0].checked){
value += children[i].value + "|";
text += children[i].innerText + "|";
}
}
if (value != ""){
value = value.substring(0, value.length-1);
text = text.substring(0, text.length-1);
}
this.valueObj.value = value;
this.srcObj.value = text;
}
},
addItem : function(text_,value_){
var item ={value: value_,text: text_}
this.options.push(item);
},
getValue : function(){
return this.valueObj.value;
},
setMultiple : function(flag){
this.multiple = flag;
},
/**重载这个方法可以实现树结构**/
getShowStr : function(){
var html = "";
for (var i=0,len=this.options.length; i<len; i++){
html += "<div style='border-bottom: solid 1px #AADDFF;width:100%;height:20' value=/""+this.options[i].value+"/" "
+ "onMouseOver=/"this.style.backgroundColor='"+this.focusColor+"'/" onMouseOut=/"this.style.backgroundColor='transparent'/" "
+ "οnclick=/""+this.loader+".selectItemOK(this)/">";
if (this.multiple){
html += "<input type='checkbox' οnclick='event.cancelBubble=true;'>";
}
html += this.options[i].text+"</div>";
}
this.dispObj.innerHTML = html;
if (this.options.length == 0){
this.dispObj.style.height = 100;
}else{
var height = 0;
var children = this.dispObj.childNodes;
for (var i=0,len=children.length; i<len; i++){
height += children[i].offsetHeight;
}
this.dispObj.style.height = height;
}
},
/**private**/
selectItemOK : function(element){
if (this.multiple){
element.childNodes[0].click();
event.cancelBubble=true;
}else{
this.srcObj.value = element.innerText;
this.valueObj.value = element.value;
event.cancelBubble=false;
}
this.selectedIndex = undefined;
},
/**private**/
initSelectedItem : function(){
var values = this.getValue();
if (values != ""){
values = values.split("|");
for (var i=0,len=this.options.length; i<len; i++){
for (var j=values.length-1; j>=0; j--){
if (values[j] == this.options[i].value){
this.focusItem(i);
if (!this.multiple){
break;
}
}
}
}
}
if (this.selectedIndex != undefined){
this.focusItem(this.selectedIndex);
}
},
/**private-private**/
focusItem : function(index){
this.dispObj.childNodes[index].style.backgroundColor=this.focusColor;
if (this.multiple){
this.dispObj.childNodes[index].childNodes[0].checked = true;
}else{
this.srcObj.value = this.dispObj.childNodes[index].innerText;
}
}
};
自定义下拉框类型source(Select、checkbox多选、日期、树型)
最新推荐文章于 2024-05-10 15:31:30 发布