每日更新|TOP排行榜|Tag標簽|充值

無憂首頁網頁模板程序模板建站教程視頻教程網頁特效圖標素材字體下載站長工具站長問答

網頁特效代碼模板無憂>網頁特效>表單按鈕特效代碼>

收藏分享查看評論表單按鈕

帶提示的下拉菜單，Js模擬的_表單按鈕特效

查看演示效果

特效Tag：下拉框搜索提示添加

用JavaScript模擬的帶提示的下拉菜單，不過好像還不太好用，只是實現了基本功能，還需要改進很多，希望高手幫盡快改進哦，用得幾張下拉框樣式的圖片，請自行保存到本地。

<script type="text/javascript">
var divSelect = {};
(function() {
    var obj = {}, oLeft = {}, oContent = {}, oButton = {}, oInput = {}, oList = {}, oData = {}, oCallBack = {};
    var timer = {};
	var $ = function(id) {
        return document.getElementById(id);
    }
	var count = function(obj) {
        var length = 0;
        if (typeof obj == 'object') {
            for (k in obj) {
                length++;
            }
        }
        return length;
    }
	var getPosition = function(obj) {
        if (!obj) {
            return {};
        }
        var top = 0;
        var left = 0;
        var width = obj.offsetWidth;
        var height = obj.offsetHeight;
        while (obj.offsetParent) {
            top += obj.offsetTop;
            left += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return {"top":top,"left":left,"width":width,"height":height};
    }
    var addEvent = function(ele, type, func) {
        if (document.addEventListener) {
            ele.addEventListener(type, func, true);
        } else if (document.attachEvent) {
            ele.attachEvent('on' + type, func);
        }
    }
    var liSort = function(a, b) {
        if (a.testResult == b.testResult) {
            return 0;
        }
        if (a.testResult) {
            return -1;
        }
        return 1;
    }
    var sortList = function(id) {
        var v = oInput[id].value;
        var oFragment = document.createDocumentFragment();
        var list = [];
        for (var i = 0; i < oList[id].childNodes.length; i++) {
            list.push(oList[id].childNodes[i]);
        }
        //replace(/([\.\\\/\*\?\+\[\(\)\]\{\}\^\$\|])/g,"\\$1");
        var re = new RegExp(v.replace(/(?=[.\\/*?+\[()\]{}^$|])/g, "\\"), "i");
        for (var i = 0; i < list.length; i++) {
            list[i].testResult = re.test(list[i].text);
        }
        list.sort(liSort);
        var oFragment = document.createDocumentFragment();
        for (var i = 0; i < list.length; i++) {
            oFragment.appendChild(list[i]);
        }
        oList[id].appendChild(oFragment);
    }
    divSelect = {
        init : function(id, data, width, callBack) {
            obj[id] = $(id);
            obj[id].className = 'divSelect';
            oData[id] = data;
            oCallBack[id] = callBack;
            oLeft[id] = document.createElement('div');
            obj[id].appendChild(oLeft[id]);
            oLeft[id].className = 'left';
            oContent[id] = document.createElement('div');
            obj[id].appendChild(oContent[id]);
            oContent[id].className = 'mrc';
            oButton[id] = document.createElement('div');
            obj[id].appendChild(oButton[id]);
            oButton[id].className = 'btn1';
            oInput[id] = document.createElement('input');
            oContent[id].appendChild(oInput[id]);
            oInput[id].className = 'text';
            oList[id] = document.createElement('ul');
            oContent[id].appendChild(oList[id]);
            oList[id].className = 'list';
            if (width) {
                oContent[id].style.width = width;
                oInput[id].style.width = width - 2;
                oList[id].style.width = width;
            }
            if (count(oData[id]) > 10) {
                oList[id].style.height = '165px';
                oList[id].style.overflowY = 'scroll';
            } else {
                oList[id].style.height = 15 * (count(oData)+1) + 'px';
                oList[id].style.overflowY = 'auto';
            }
            for (key in oData[id]) {
                oInput[id].value = oData[id][key].text;
                obj[id].value = oData[id][key].value;
                break;
            }
            for (key in oData[id]) {
                if (oData[id][key].selected == true) {
                    oInput[id].value = oData[id][key].text;
                    obj[id].value = oData[id][key].value;
                }
                var oLi = document.createElement('li');
                oList[id].appendChild(oLi);
                oLi.value = oData[id][key].value;
                oLi.text = oData[id][key].text;
                oLi.innerHTML = oData[id][key].text;
                addEvent(oLi, 'mouseover', (function(id){
                    return function() {
                        event.srcElement.className = 'spec';
                    }
                })(id));
                addEvent(oLi, 'mouseout', (function(id){
                    return function() {
                        event.srcElement.className = '';
                    }
                })(id));
                addEvent(oLi, 'click', (function(id) {
                    return function() {
                        obj[id].value = event.srcElement.value;
                        oInput[id].value = event.srcElement.text;
                        if (typeof oCallBack[id] == 'function') {
                            oCallBack[id](event.srcElement.value, event.srcElement.text);
                        }
                    }
                })(id));
            }
            for (var i = 0; i < oList[id].childNodes.length; i++) {
                if (oList[id].childNodes[i].value == obj[id].value) {
                    oList[id].childNodes[i].className = 'spec';
                    break;
                }
            }
            addEvent(oInput[id], 'focus', (function(id) {
                return function() {
                    oInput[id].select();
                }
            })(id));
            addEvent(obj[id], 'mousedown', (function(id){
                return function() {
                    var pos = getPosition(obj[id]);
                    oList[id].style.display = 'block';
                    oList[id].style.top = pos.top + pos.height + 2;
                    oList[id].style.left = pos.left + 1;
                }
            })(id));
            addEvent(document, 'click', (function(id) {
                return function() {
                    oList[id].style.display = 'none';
                    oList[id].innerHTML = '';
                    for (key in oData[id]) {
                        var oLi = document.createElement('li');
                        oList[id].appendChild(oLi);
                        oLi.value = oData[id][key].value;
                        oLi.text = oData[id][key].text;
                        oLi.innerHTML = oData[id][key].text;
                        addEvent(oLi, 'mouseover', (function(id){
                            return function() {
                                event.srcElement.className = 'spec';
                            }
                        })(id));
                        addEvent(oLi, 'mouseout', (function(id){
                            return function() {
                                event.srcElement.className = '';
                            }
                        })(id));
                        addEvent(oLi, 'click', (function(id) {
                            return function() {
                                obj[id].value = event.srcElement.value;
                                oInput[id].value = event.srcElement.text;
                                if (typeof oCallBack[id] == 'function') {
                                    oCallBack[id](oList[id].childNodes[i].value, oList[id].childNodes[i].text);
                                }
                            }
                        })(id));
                    }
                }
            })(id));
            addEvent(obj[id], 'click', function() {
                    event.cancelBubble = true;
                }
            );
            addEvent(oButton[id], 'mousedown', (function(id){
                return function() {
                    oButton[id].className = 'btn2';
                }
            })(id));
            addEvent(oButton[id], 'mouseup', (function(id){
                return function() {
                    oButton[id].className = 'btn1';
                }
            })(id));
            addEvent(oInput[id], 'keydown', (function(id) {
                return function() {
                    clearTimeout(timer[id]);
                    if (event.keyCode == 38 || event.keyCode == 40) {
                        if (oList[id].childNodes.length < 2) {
                            return;
                        } else {
                            if (event.keyCode == 38 && oList[id].childNodes[0].className != 'spec') {
                                for (var i = 0; i < oList[id].childNodes.length; i++) {
                                    if (oList[id].childNodes[i].className == 'spec') {
                                        oList[id].childNodes[i].className = '';
                                        oList[id].childNodes[i - 1].className = 'spec';
                                        break;
                                    }
                                }
                            } else if (event.keyCode == 40 && oList[id].childNodes[oList[id].childNodes.length - 1].className != 'spec') {
                                for (var i = 0; i < oList[id].childNodes.length; i++) {
                                    if (oList[id].childNodes[i].className == 'spec') {
                                        oList[id].childNodes[i].className = '';
                                        oList[id].childNodes[i + 1].className = 'spec';
                                        break;
                                    }
                                }
                            }
                        }
                        return;
                    }
                    if (event.keyCode == 13) {
                        if (oList[id].childNodes.length > 0) {
                            for (var i = 0; i < oList[id].childNodes.length; i++) {
                                if (oList[id].childNodes[i].className == 'spec') {
                                    obj[id].value = oList[id].childNodes[i].value;
                                    oInput[id].value = oList[id].childNodes[i].text;
                                    if (typeof oCallBack[id] == 'function') {
                                        oCallBack[id](oList[id].childNodes[i].value, oList[id].childNodes[i].text);
                                    }
                                    break;
                                }
                            }
                        }
                        return;
                    }
                    oList[id].scrollTop = '0px';
                    timer[id] = setTimeout((function(id) {
                        return function() {
                            sortList(id);
                            if (oList[id].childNodes.length > 0) {
                                oList[id].childNodes[0].className = 'spec';
                            }
                        }
                    })(id), 100);
                }
            })(id));
        },
        setValue : function(id, value, text) {
            obj[id].value = value;
            oInput[id].value = text;
        }
    }
})();
</script>
<style type="text/css">
.divSelect {
    overflow:hidden;
    vertical-align:middle;
    display:inline;
}
.divSelect .left {
    float:left;
    line-height:20px;
    height:20px;
    background:#fff url(/jscss/demoimg/200909/select_left.gif) no-repeat
    ;width:2px;
}
.divSelect .btn1 {
    float:left;
    line-height:20px;
    height:20px;
    background:#fff url(/jscss/demoimg/200909/select_btn1.gif) no-repeat;
    width:17px;
}
.divSelect .btn2 {
    float:left;
    line-height:20px;
    height:20px;
    background:#fff url(/jscss/demoimg/200909/select_btn2.gif) no-repeat;
    width:17px;
}
.divSelect .mrc {
    float:left;
    background:#fff url(/jscss/demoimg/200909/select_bg.gif) repeat-x center center;
    line-height:20px;
    height:20px;
    width:100px;
}
.divSelect .text {
    width:98px;
    margin:2px 0 0 0;
    padding:0 0 0 2px;
    float:left;
    border:0;
    height:17px;
    line-height:17px;
    background:#f6f8fd;
}
.divSelect .list {
    position:absolute;
    font-size:12px;
    line-height: 15px;
    margin:0;
    border:1px #000 solid;
    background: #f6f8fd;
    text-align:left;
    display:none;
    width:102px;
    height:50px;
    scrollbar-face-color:#d4d0c8;
    scrollbar-shadow-color:#808080;
    scrollbar-highlight-color:#fff;
    scrollbar-3dlight-color:#d4d0c8;
    scrollbar-darkshadow-color:#404040;
    scrollbar-track-color:#d4d0c8;
    scrollbar-arrow-color:#000;
}
.divSelect .list li {
    width:100%;
    color:#333;
    margin:0;
    padding:0;
    height:15px;
    line-height:15px;
    cursor:pointer;
    list-style-type:none;
    padding-left:2px;
    display: block;
    white-space:nowrap;
    overflow:hidden;
}
.divSelect .list li.spec {
    background:#0a246a;
    color:#fff;
}
</style>
<body>
<div id="sss"></div>
</body>
<script type="text/javascript">
var callback = function() {
    alert(document.getElementById('sss').value);
}
var data = [{'text' : 'abcdefg', 'value' : 1, selected : false}, {'text' : 'efghijkl', 'value' : 2, selected : true}, {'text' : 'labmn', 'value' : 3, selected : false}];
divSelect.init('sss', data, 200, callback);
</script>

所屬頻道：表單按鈕特效/更新時間：2012-11-29

[收藏][報錯][返回列表]

相關表單按鈕特效：

表單按鈕特效Rss訂閱特效代碼搜索

表單按鈕特效推薦

猜你也喜歡看這些

相關鏈接：
復制本頁鏈接| 搜索帶提示的下拉菜單，Js模擬的
特效說明：
表單按鈕模板-帶提示的下拉菜單，Js模擬的。