javascript select 控件

置顶 于 2009-12-04 11:14:00 发布
阅读量572 收藏
点赞数
分类专栏： javascript 文章标签： javascript function null div input border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caibinghong/article/details/4938785
版权

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>用Javascript编写的一个全新的Select</title>
    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        .comm_select
        {
            display: inline-block;
        }
        .comm_select table
        {
            border-collapse: collapse;
            border: 0px;
            width: 100%;
            font-size: 12px;
        }
        .comm_select table td
        {
            border: 0px;
            padding: 0px;
        }
        .comm_select_input
        {
            border: 1px #C4CAD8 solid;
            width: 100%;
            background: #FFF;
            height: 18px;
        }
        .comm_select .com_sel_btn
        {
            width: 17px;
            height: 18px;
            cursor: pointer;
            background: url(trigger.gif) no-repeat left top;
        }
        .comm_select .com_sel_itempanel
        {
            width: 100%;
            position: absolute;
            z-index: 99;
            border: 1px #7F9DB9 solid;
            height: 50px;
            display: none;
            background: #FFF;
            overflow: hidden;
            overflow-y: auto;
        }
        .comm_select .com_select_item
        {
            padding: 2px;
            background: #FFF;
            display: block;
            cursor: pointer;
            width: 100%;
            text-decoration: none;
            color: #000;
        }
        .comm_select .com_select_item:hover
        {
            background: #BBD0E9;
        }
    </style>
</head>
<body>
    <div class="comm_select" style="display: none;">
        <table>
            <tr>
                <td style="width: 100%">
                    <input type="text" class="comm_select_input" disabled="disabled" />
                </td>
                <td>
                    <div class="com_sel_btn">
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="com_sel_itempanel">
                        <div class="com_select_item">
                            字符串</div>
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
        function addEventHandler(oTarget, sEventType, fnHandler) {
            if (oTarget.addEventListener) {
                oTarget.addEventListener(sEventType, fnHandler, false);
            } else if (oTarget.attachEvent) {
                oTarget.attachEvent("on" + sEventType, fnHandler);
            } else {
                oTarget["on" + sEventType] = fnHandler;
            }
        };

        function removeEventHandler(oTarget, sEventType, fnHandler) {
            if (oTarget.removeEventListener) {
                oTarget.removeEventListener(sEventType, fnHandler, false);
            } else if (oTarget.detachEvent) {
                oTarget.detachEvent("on" + sEventType, fnHandler);
            } else {
                oTarget["on" + sEventType] = null;
            }
        };
        var Extend = function(destination, source) {
            for (var property in source) {
                destination[property] = source[property];
            }
        }
        //冒泡
        function cancelBubble_(evt) {
            var e = (evt) ? evt : window.event;
            if (window.event) {
                e.cancelBubble = true;
            } else {
                //e.preventDefault();
                e.stopPropagation();
            }
        }
        var comSelect = function(config) {
            this.id = config.id || "";
            this.readTo = config.readTo || document;
            this.isEdit = config.isEdit || false;
            this.width = config.width || "100%";
            this.height = config.height || 80;
            this.ItemsConfig = config.itemsConfig || null;
            this.keyDownEvent = config.keyDownEvent || function() { };
            this.onChangeEvent = config.changeEvent || function() { };
            //this.clickEvent = config.click || function() { };
            //this.dblclickEvent = config.dblclick || function() { };
            this.itemList = [];
            this.selected = null;
            this.init();
        }
        comSelect.prototype = {
            init: function() {
                var entity = this; //实例;
                this.ctlSelect = document.createElement("div");
                this.selectInput = document.createElement("input");
                this.selectBtn = document.createElement("div");
                //
                this.ctlSelect.setAttribute("id", this.id);
                this.selectInput.setAttribute("type", "text");
                this.selectInput.className = "comm_select_input";
                this.selectBtn.className = "com_sel_btn";
                this.ctlSelect.className = "comm_select";
                this.selectItemPanel = document.createElement("div");
                this.selectItemPanel.className = "com_sel_itempanel";

                this.ctlSelect.style.width = (typeof this.width) == "string" ? this.width : this.width + "px";
                this.selectItemPanel.style.height = (typeof this.height) == "string" ? this.height : this.height + "px";
                //bind Items

                if (this.ItemsConfig != null) {
                    this.addItemArray(this.ItemsConfig);
                }
                //bind event
                function show(evt) {
                    var isshow = entity.selectItemPanel.style.display;
                    entity.selectItemPanel.style.width = entity.ctlSelect.offsetWidth + "px"
                    entity.selectItemPanel.style.display = (isshow == "block") ? "none" : "block";
                    cancelBubble_(evt);
                }
                addEventHandler(this.selectInput, "keydown", this.keyDownEvent);
                addEventHandler(this.selectInput, "dblclick", show);
                //isEdit
                if (!this.isEdit) {
                    this.selectInput.setAttribute("readOnly", true);
                    removeEventHandler(this.selectBtn, "click", show);
                    addEventHandler(this.ctlSelect, "click", show);
                } else {
                    addEventHandler(this.selectBtn, "click", show);
                    this.selectInput.removeAttribute("readOnly");
                }
                //document
                addEventHandler(document, "click", function() { entity.selectItemPanel.style.display = "none" });
                //creat com_select layout
                var table = document.createElement('table');
                var tbody = document.createElement('tbody');
                var r1 = document.createElement('tr');
                var r2 = document.createElement('tr');
                var r1_td1 = document.createElement('td');
                var r1_td2 = document.createElement('td');
                var r2_td1 = document.createElement('td');
                r1_td1.setAttribute("width", "100%");
                r2_td1.setAttribute("width", "100%");
                r2_td1.setAttribute("colSpan", "2");
                r1.appendChild(r1_td1);
                r1.appendChild(r1_td2);
                r2.appendChild(r2_td1);

                r1_td1.appendChild(this.selectInput);
                r1_td2.appendChild(this.selectBtn);
                r2_td1.appendChild(this.selectItemPanel);

                r1.appendChild(r1_td1);
                r1.appendChild(r1_td2);
                r2.appendChild(r2_td1);

                tbody.appendChild(r1);
                tbody.appendChild(r2);
                table.appendChild(tbody);
                this.ctlSelect.appendChild(table);

                //add to location
                this.readTo.appendChild(this.ctlSelect);
            },
            addItem: function(config) {
                //<div class="com_select_item">字符串</div>
                var entity = this;
                var div = document.createElement("a");
                div.setAttribute("href", "javascript:void(0);");
                div.className = "com_select_item";
                var text = document.createTextNode(config.text);
                div.appendChild(text);
                if (document.all) {//IE 与其它的事件绑定顺序不一样 是IE
                    addEventHandler(div, "click", entity.onChangeEvent); //(1)
                }
                addEventHandler(div, "click", function() {
                    entity.selectInput.setAttribute("value", config.text);
                    for (var i = 0; i < entity.itemList.length; i++) {
                        if (div.innerHTML == entity.itemList[i].text) {
                            entity.selected = { text: entity.itemList[i].text, value: entity.itemList[i].value, index: i }; break;
                        }
                    };

                });
                if (!document.all) {//IE 与其它的事件绑定顺序不一样 是其它
                    addEventHandler(div, "click", entity.onChangeEvent); //(2)
                }
                this.selectItemPanel.appendChild(div);
                this.selectInput.setAttribute("value", this.itemList[0].text); // default value index 0
                this.selected = { text: this.itemList[0].text, value: this.itemList[0].value, index: this.itemList[0].index };
            },
            addItemArray: function(items) {
                for (var i = 0; i < items.length; i++) {
                    this.setItemConfig(items[i]);
                    this.itemList.push({ index: i, key: (items.id || i), text: this.ItemConfig.text, value: this.ItemConfig.value });
                    this.addItem(this.ItemConfig);
                }

            },
            setItemConfig: function(ItemConfig) {
                this.ItemConfig = {
                    text: "",
                    id: "",
                    index: "",
                    value: ""
                };
                Extend(this.ItemConfig, ItemConfig || {});
            },
            delItem: function(str) {//index or key or value
                var entity = this;
                var indexof = -1;
                var temp = null;
                var len = entity.itemList.length;
                str = str.replace(/(^/s*)|(/s*$)/g, ""); //去除左右空格
                if (str == "" || str == null) { return { text: null, value: null, index: null }; }
                for (var i = 0; i < len; i++) {
                    if (entity.itemList[i].text == str || entity.itemList[i].index == str || entity.itemList[i].value == str) {
                        temp = entity.itemList[i];
                        indexof = i; break;
                    }
                };
                if (indexof == -1) {
                    alert("找不到要删除的项!"); return { text: null, value: null, index: null };
                }
                for (i = indexof; i < len; i++) {
                    entity.itemList[i] = entity.itemList[i + 1];
                }
                entity.itemList.pop();
                entity.selectInput.setAttribute("value", entity.itemList[0].text); // default value index 0
                entity.selected = { text: entity.itemList[0].text, value: entity.itemList[0].value, index: entity.itemList[0].index };
                entity.selectItemPanel.innerHTML = "";
                var newarr = entity.itemList;
                entity.itemList = [];
                entity.addItemArray(newarr);
                return temp;
            },
            findItem: function(str) {//index or key or value
                var entity = this;
                str = str.replace(/(^/s*)|(/s*$)/g, ""); //去除左右空格
                if (str == "" || str == null) { return { text: null, value: null, index: null }; }
                for (var i = 0; i < entity.itemList.length; i++) {
                    if (str == entity.itemList[i].text) {
                        return entity.itemList[i];
                    }
                };
                return { text: null, value: null, index: null };
            },
            removeKeyDownEvent: function() { var entity = this; removeEventHandler(entity.selectInput, "keydown", entity.keyDownEvent) },
            removeClickEvent: function() { var entity = this; removeEventHandler(entity.selectInput, "click", entity.clickEvent) },
            removeDblclickEvent: function() { var entity = this; removeEventHandler(entity.selectInput, "dblclick", entity.dblclickEvent) }
        }
       
    </script>

    <div id="test" style="width: 500px;">
    </div>
    <style>
        #Div1 a
        {
            display: block;
            width: 100px;
            padding: 5px;
        }
        #Div1 a:hover
        {
            background: #00ff00;
        }
    </style>
    <div id="Div1">
        <a href="#">asdfasdfsadf</a>
    </div>
    <div id="Div2">
    </div>

    <script type="text/javascript">
        var comSel0 = new comSelect(
        {
            width: 100,
            height: 100,
            isEdit: true,
            readTo: document.getElementById("test"),
            changeEvent: function() {
                var seledObj = comSel0.selected; //得到当前选中的值对象{value ,text,index}
                //查看当前选中的值
                //alert("text:" + seledObj.text + " value:" + seledObj.value + " index:" + seledObj.index);
                document.getElementById("itemText").value = "text:" + seledObj.text + " value:" + seledObj.value + " index:" + seledObj.index;
            },
            isEdit: true
        }
        );
        //添加条目
        comSel0.addItemArray(
            [
                { text: "item1", value: "Bxz://c:csdxtasdf//item1.xml" },
                { text: "item2", value: "Bxz://c:csdxtasdf//item2.xml" },
                { text: "item3", value: "Bxz://c:csdxtasdf//item3.xml" },
                { text: "item4", value: "Bxz://c:csdxtasdf//item4.xml" }
            ]
        );
        comSel0.addItemArray(
            [
                { text: "item5", value: "Bxz://c:csdxtasdf//item5.xml" },
                { text: "item6", value: "Bxz://c:csdxtasdf//item6.xml" },
                { text: "item7", value: "Bxz://c:csdxtasdf//item7.xml" },
                { text: "item8", value: "Bxz://c:csdxtasdf//item8.xml" },
                { text: "item9"}
            ]
        );

        function lookSelected() {
            alert("text:" + comSel0.selected.text + " value:" + comSel0.selected.value + " index:" + comSel0.selected.index);
        }
        function delItem() {
            alert("删除对象返回值" + comSel0.delItem(document.getElementById("itemText").value).text);
        }
        function find_Item() {
            alert("找到返回值" + comSel0.findItem(document.getElementById("itemText").value).text);
        }
    </script>

    <input type="text" id="itemText" style="width: 500" />
    <input οnclick="lookSelected()" value="lookSelected" type="button" />
    <input οnclick="delItem()" value="delItem" type="button" />
    <input οnclick="find_Item()" value="find_Item" type="button" />
</body>
</html>
用Javascript编写的一个全新的Select

<script type="text/javascript"> </script>

<script type="text/javascript"> </script>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值