自定义下拉框类型source(Select、checkbox多选、日期、树型)

/**
 * @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;
        }
    }
};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值