JQuery SELECT單選模擬jQuery.select.js

更新時(shí)間：2009年11月12日 22:38:30 作者：

本文件是跟據(jù) zhangjingwei 的Jquery Select(單選) 模擬插件 V1.3.4 修改而來(lái)的，需要的朋友可以參考下。

基于jQuery JavaScript Library v1.3.2 的單選模擬
(本文件是跟據(jù) zhangjingwei 的Jquery Select(單選) 模擬插件 V1.3.4 修改而來(lái)的)
a. 修改的主要原因是，原來(lái)的zhangjingwei的模擬在顯示方式上的問(wèn)題。在跟文字交替出現(xiàn)時(shí)會(huì)出現(xiàn)錯(cuò)位?，F(xiàn)將模擬DIV的display修改為inline方式。更自然的嵌入到文本行中。
b.在加載文件后自動(dòng)轉(zhuǎn)化樣式名為'commonselect' 的select。簡(jiǎn)化調(diào)用
c.對(duì)select的onchange()事件的響應(yīng)。以及寬度獲取的小調(diào)整
jquery.select.js

復(fù)制代碼代碼如下:

 
/* 
* jQuery.select.js 
*/ 
jQuery.fn.sSelect = function(){ 
    var selectId = $(this).attr('id'); 
    var selectZindex = $(this).css('z-index'); 
    var selectIndex = $('#'+selectId+' > select > option').index($('#'+selectId+' > select > option:selected')[0]); 
    $('#'+selectId).append('<div class="dropselectbox"><h4></h4><span class="FixSelectBrowserSpan"></span><ul style="display:none" style="display:none"><li></li></ul></div>'); 
    $('#'+selectId+' > div > h4').empty().append($('#'+selectId+' > select > option:selected').text()); 
    $('.dropselectbox').css("display", 'block'); 

    //取select的寬度 優(yōu)先級(jí) select樣式中的寬度 - select自動(dòng)的寬度 - 默認(rèn)為60 
    var selectcssWidth = $('#'+selectId+'> select').css('width'); 
    selectcssWidth = typeof(selectcssWidth) =='undefined' ? 0 : parseInt(selectcssWidth.replace('px','')) +5 ; 
    var selectWidth = selectcssWidth ? selectcssWidth : ( $('#'+selectId+'> select').width() > 0 ? $('#'+selectId+'> select').width() + 5 : 60); 
    $('#'+selectId).css("margin-right",selectWidth);    //修改偏移量 
    $('#'+selectId+' > div > h4').css("width", selectWidth); //將原select的寬度賦值給生成的select（并不是h4的總寬度） 
    $('#'+selectId+' > div > ul').css("width",selectWidth); //將h4的總寬度賦值給Ul 
    $('#'+selectId+' > select').hide(); 
    $('#'+selectId+' > div').hover(function(){ 
        $('#'+selectId+' > div > h4').addClass("over"); 
        $('#'+selectId+' > div > span').addClass("over"); 
    },function(){ 
        $('#'+selectId+' > div > h4').removeClass("over"); 
        $('#'+selectId+' > div > span').removeClass("over"); 
    }); 
    $('#'+selectId) 
    .bind("focus",function(){ 
        __clearSelectMenu(); 
        $('#'+selectId+' > div > h4').addClass("over"); 
        $('#'+selectId+' > div > span').addClass("over"); 
    }) 
    .bind("click",function(e){ 
        //$('#value2').append('點(diǎn)擊：'+selectIndex+'&nbsp;&nbsp;<br>'); 
        if($('#'+selectId+' > div > ul').css("display") == 'block'){ 
            __clearSelectMenu(selectId); 
            return false; 
        }else{ 
            if ($.browser.opera){__clearSelectMenu();} 
            $('#'+selectId+' > div > h4').addClass("current"); 
            $('#'+selectId+' > div > span').addClass("over").addClass("current"); 
            $('#'+selectId+' > div > ul').show(); 
            var selectZindex = $(this).css('z-index'); 
            if ($.browser.msie || $.browser.opera){         
                $('.dropdown').removeClass('overclass');         
            } 
            $('#'+selectId).addClass('overclass'); 
            __setSelectValue(selectId); 
            var windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $(this).offset().top; 
            var ulspace = $('#'+selectId+' > div > ul').outerHeight(true); 
            var windowspace2 = $(this).offset().top - $(window).scrollTop() - ulspace; 
            if (windowspace < ulspace && windowspace2 > 0) { 
                $('#'+selectId+' > div > ul').css({top:-ulspace}); 
            }else{ 
                $('#'+selectId+' > div > ul').css({top:$('#'+selectId+' > div > h4').outerHeight(true)}); 
            } 
            selectIndex = $('#'+selectId+' > div > ul > li').index($('.selectedli')[0]); 
            $(window).scroll(function(){ 
                var windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $('#'+selectId).offset().top; 
                var ulspace = $('#'+selectId+' > div > ul').outerHeight(true); 
                if (windowspace < ulspace) { 
                    $('#'+selectId+' > div > ul').css({top:-ulspace}); 
                }else{ 
                    $('#'+selectId+' > div > ul').css({top:$('#'+selectId+' > div > h4').outerHeight(true)}); 
                } 
            }); 
            //響應(yīng)鼠標(biāo)點(diǎn)擊選擇 
            $('#'+selectId+' > div > ul > li').click(function(e){                                         
                    selectIndex = $('#'+selectId+' > div > ul > li').index(this); 
                    //$('#value2').append('鼠標(biāo)點(diǎn)擊：'+selectIndex+'&nbsp;&nbsp;<br>'); 
                    $('#'+selectId+'> select')[0].selectedIndex = selectIndex; 
                    $('#'+selectId+' > div > h4').empty().append($('#'+selectId+' > select > option:selected').text()); 
                    __clearSelectMenu(selectId,selectZindex); 
                    e.stopPropagation(); 
                    e.cancelbubble = true; 
                    //SELECT onchange 事件 
                    $('#'+selectId+'> select').change(); 
            }) 
            .hover( 
                 function(){ 
                        $('#'+selectId+' > div > ul > li').removeClass("over"); 
                        $(this).addClass("over").addClass("selectedli"); 
                        selectIndex = $('#'+selectId+' > div > ul > li').index(this); 
                    }, 
                    function(){ 
                        $(this).removeClass("over"); 
                    } 
            ); 
            //End 
        }; 
        e.stopPropagation(); 
    }) 
    .bind("mousewheel",function(){ 
        //以后也許支持滾輪     
        /*$('#'+selectId+' > div > ul > li').hover( 
            function(){ 
             return false; 
            }, 
            function(){ 
                return false; 
            } 
        );*/ 
    }) 
    .bind("dblclick", function(){ 
        __clearSelectMenu(); 
        return false; 
    }) 
    .bind("keydown",function(e){ 
        //var hotkeys = e.keyCode; 
        $(this).bind('keydown',function(e){ 
            if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36){ 
                return false; 
            } 
        }); 
        switch(e.keyCode){ //設(shè)置為true可給定case范圍 
            case 9: 
                return true; 
                break; 
            case 13: 
                //enter 
                //$('#value2').append('按回車收到的值：'+selectIndex+'&nbsp;&nbsp;<br>'); 
                __clearSelectMenu(); 
                break; 
            case 27: 
                //esc 
                __clearSelectMenu(); 
                break; 
            case 33: 
                $('#'+selectId+' > div > ul > li').removeClass("over"); 
                selectIndex = 0; 
                __keyDown(selectId,selectIndex); 
                break; 
            case 34: 
                $('#'+selectId+' > div > ul > li').removeClass("over"); 
                selectIndex = ($('#'+selectId+' > select > option').length - 1); 
                __keyDown(selectId,selectIndex); 
                break; 
            case 35: 
                $('#'+selectId+' > div > ul > li').removeClass("over"); 
                selectIndex = ($('#'+selectId+' > select > option').length - 1); 
                __keyDown(selectId,selectIndex); 
                break; 
            case 36: 
                $('#'+selectId+' > div > ul > li').removeClass("over"); 
                selectIndex = 0; 
                __keyDown(selectId,selectIndex); 
                break; 
            case 38: 
                //up 
                //$('#value2').append('原始值：'+selectIndex+'&nbsp;&nbsp;<br>'); 
                $('#'+selectId+' > div > ul > li').removeClass("over"); 
                if (selectIndex == 0){ 
                    selectIndex = 0; 
                }else{ 
                    selectIndex--; 
                }; 
                //$('#value2').append('<span style="color:red;" style="color:red;">向上改變的aa值：</span>'+selectIndex+'&nbsp;&nbsp;'); 
                __keyDown(selectId,selectIndex); 
                break; 
            case 40: 
                //down 
                //$('#value2').append('傳遞過(guò)來(lái)的：'+selectIndex+'&nbsp;&nbsp;'); 
                $('#'+selectId+' > div > ul > li').removeClass("over"); 
                if (selectIndex == ($('#'+selectId+' > select > option').length - 1)){ 
                    selectIndex = $('#'+selectId+' > select > option').length - 1; 
                }else{ 
                    selectIndex ++; 
                }; 
                //$('#value2').append('<span style="color:blue;" style="color:blue;">向下改變的aa值：</span>'+selectIndex+'&nbsp;&nbsp;'); 
                __keyDown(selectId,selectIndex); 
                break; 
            /*case ((hotkeys > 47 && hotkeys < 59) || (hotkeys > 64 && hotkeys < 91) || (hotkeys > 96 && hotkeys < 123)): 
                //首字幕查詢預(yù)留接口 
                //character = String.fromCharCode(hotkeys).toLowerCase(); 
                return false; 
                break;*/ 
            default: 
                return false; 
                break; 
        }; 
    }) 
    .bind("blur",function(){ 
        __clearSelectMenu(selectId,selectZindex); 
        return false; 
    }); 
    //禁止選擇 
    $('.dropselectbox').bind("selectstart",function(){ 
            return false; 
    }); 
}; 
function __clearSelectMenu(selectId,selectZindex){ 
    //$('#value2').append('移除焦點(diǎn)：'+selectIndex+'&nbsp;&nbsp;<br>'); 
    $('.dropselectbox > ul').empty().hide(); 
    $('.dropselectbox > h4').removeClass("over").removeClass("current"); 
    $('.dropselectbox > span').removeClass("over"); 
    $('#'+selectId).removeClass('overclass'); 
} 
function __setSelectValue(sID){ 
    $('#'+sID+' > div > ul').empty(); 
    $.each($('#'+sID+' > select > option'), function(i){ 
        $('#'+sID+' > div > ul').append("<li class='FixSelectBrowser'>"+$(this).text()+"</li>"); 
    }); 
    $('#'+sID+' > div > h4').empty().append($('#'+sID+' > select option:selected').text()); 
    $('#'+sID+' > div > ul > li').eq($('#'+sID+'> select')[0].selectedIndex).addClass("over").addClass("selectedli"); 
} 
function __keyDown(sID,selectIndex){ 
    $('#'+sID+'> select')[0].selectedIndex = selectIndex; 
    $('#'+sID+' > div > ul > li:eq('+selectIndex+')').toggleClass("over"); 
    $('#'+sID+' > div > h4').empty().append($('#'+sID+' > select option:selected').text()); 
    //SELECT onchange 事件 
    $('#'+sID+'> select').change(); 
} 
/* 自動(dòng)調(diào)用 */ 
$(document).ready(function(){ 
    var s = new Array(); 
    var t = document.getElementsByTagName('select'); 
    var j = 0; 
    for(var i=0;i<t.length;i++){ 
        if(t[i].className=='commonselect'){ 
            s[j] = t[i]; 
            j++; 
        } 
    } 
    if(j==0)return; 
    var k = m = null; 
    for(var i=0;i<s.length;i++){ 
        k = s[i].parentNode; 
        m = createDiv(k, i); 
        //s[i].replaceNode(m); 
        k.replaceChild(m,s[i]) 
        m.appendChild(s[i]); 
        $('#selectbox'+ i).sSelect(); 
    }     
    function createDiv(p, i){ 
        var div = document.createElement('div'); 
        div.className = 'dropdown'; 
        div.id = 'selectbox' + i; 
        div.innerHTML = '&nbsp;'; 
        p.appendChild(div); 
        return div;     
    } 
}) 

HTML應(yīng)用

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JQuery SELECT單選模擬</title> 
<style type="text/css" bogus="1"> 
body,div,ul,h4,li {margin:0; padding:0; border:none; list-style:none; font-size:1;} 
/*下拉列表select的commonselect樣式 配合jquery.select插件 */ 
/* select style */ 
.dropdown {outline:none;z-index:1;display:inline-block;*display:inline; position:relative;} 
.dropdown * {-moz-user-select:none;} 
.dropselectbox{float:left; position:absolute} 
.overclass{ z-index:999} /* 對(duì)于IE下層定位問(wèn)題的修正樣式 */ 
.dropdown h4{position:relative;cursor:default; text-indent:5px;text-align:left;display:block;overflow:visible; margin:0; height:20px;font:12px/21px Arial, Helvetica, sans-serif; border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E;padding-left:0px;} 
.dropdown h4.over{border-color:#369;} 
.dropdown h4.current{border-color:#003;} 
.dropdown div {display:none;position:absolute; left:0px; top:0px;} 
.dropdown span {position:absolute;top:4px; right:3px; background:url(ico.gif) no-repeat center; width:16px; height:14px;} 
.dropdown ul{position:absolute;display:none;border:1px solid #AAA; background:#333;color:#8E867B;} 
.dropdown ul li{text-indent:5px;background:#333;height:19px;display:block;cursor:default;font:400 12px/19px Arial, Helvetica, sans-serif;text-align:left;} 
.dropdown ul li.over{background:#369; color:#FFF;} 
/* select style */ 
/* input style */ 
input.txt{border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E; height:18px;line-height:18px;} 
</style> 
<script type="text/javascript" src="jquery132.js" src="jquery132.js"></script> 
<script type="text/javascript" src="jquery.select.js" src="jquery.select.js"></script> 
</head> 
<body style="background:none" style="background:none"> 
    <h1>Jquery Select(單選) 模擬插件 V1.3.4</h1> 
    <form action="#" method="post" style="margin:10px;" style="margin:10px;"> 
    類型： 
    <select name="type" class="commonselect" id="test"> 
                <option value=""></option> 
                <option value="男">類型男</option> 
                <option value="女">類型女</option> 
        </select> 
    性別: 
     <select name="sex" style="width:100px" onchange="alert(this.value);"> 
                <option value="">性別：</option> 
                <option value="男">男</option> 
                <option value="女">女</option> 
        </select> 
    <input type="text" size="8" class="txt" name='input'> 
    <input type="submit" id="postform" value="提交表單" style="border:1px solid #000; height:23px; margin-left:20px;" /> 
    </form> 
</body> 
</html> 