js教程

JQuery SELECT单选模拟jQuery.select.js_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:41 PM

jqueryselect

基于jQuery JavaScript Library v1.3.2 的单选模拟
(本文件是跟据 zhangjingwei 的Jquery Select(单选) 模拟插件 V1.3.4 修改而来的)
a. 修改的主要原因是，原来的zhangjingwei的模拟在显示方式上的问题。在跟文字交替出现时会出现错位。现将模拟DIV的display修改为inline方式。更自然的嵌入到文本行中。
b.在加载文件后自动转化样式名为'commonselect' 的select。简化调用
c.对select的onchange()事件的响应。以及宽度获取的小调整
jquery.select.js

复制代码代码如下:

/* 
* 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('


'); 
    $('#' selectId ' > div > h4').empty().append($('#' selectId ' > select > option:selected').text()); 
    $('.dropselectbox').css("display", 'block'); 

    //取select的宽度 优先级 select样式中的宽度 - select自动的宽度 - 默认为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('点击：' selectIndex '  
'); 
        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  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                     $('#' select id'> div > ul').css({top:-ulspace}); 
               }else{ 
                   $('#' selectId ' > div > ul').css({top:$(' #'selectId'>div>h4').outerHeight(true)}); 
            //响应鼠标点击选择 
            $('#' selectId ' > div > ul > li').click(function(e){                                         
                    selectIndex = $('#' selectId ' > div > ul > li').index(this); 
                   //$('鼠标点击：' selectIndex '  
'); 
                  $ ('#' selectId '> select')[0].selectedIndex = 
                    $('#' selectId ' > div > h4').empty().append($('#' selectId); ' > 选择 > 选项：已选择').text()); 
                  __clearSelectMenu(selectId,selectZindex); 
                  e.stopPropagation();   e.cancelbuble = true; 
                    // SELECT onchange 事件 
                    $('#' selectId '> select').change(); 
            }) 
            .hover( 
                 function(){ 
                       $('#' selectId ' > div > ul > li').removeClass("over"); 
                        $(这个) .addClass("over").addClass("selectedli"); 
                       selectIndex = $('#' selectId ' > div > ul > li').index(this); 
                   }, 
                    function(){ 
                       $(this).removeClass("over"); 
                    } 
            ); 
            //结束
        }; 
        e.stopPropagation(); 
    }) 
    .bind("mousewheel",function(){ 
        //以后也许支持滚轮     
        /*$('#' selectId ' > div > ul > li' ).hover( 
            function(){ 
             return false; 
            }, 
            function(){ 
                return false; 
            } 
        );*/ 
    } ) 
    .bind("dblclick", function(){ 
        __clearSelectMenu(); 
        返回 false; 
    }) 
    .bind("keydown",function(e){ 
        //var 热键 = e.keyCode; 
        $(this).bind('keydown',function(e){ 
            if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36){ 
               返回 false; 
            } 
        }); 
        switch(e.keyCode){ //设置为true可给定case范围 
            case 9: 
                return true; 
                break; 
            case 13: 
                //enter 
                //$('#value2').append('按回车收到的值：' selectIndex '  
'); 
                __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 '  
'); 
                $('#' selectId ' > div > ul > li').removeClass("over"); 
                if (selectIndex == 0){ 
                    selectIndex = 0; 
                }else{ 
                    selectIndex--; 
                }； 
                //$('#value2').append('向上改变的aa值：' selectIndex '  '); 
                __keyDown(selectId,selectIndex); 
                休息； 
            case 40: 
                //down 
                //$('#value2').append('传递过来的：' selectIndex '  '); 
                $('#' selectId ' > div > ul > li').removeClass("over"); 
                if (selectIndex == ($('#' selectId ' > 选择 > 选项').length - 1)){ 
                    selectIndex = $('#' selectId ' > 选择 > 选项' ).长度 - 1; 
                }否则{ 
                    selectIndex ; 
                }； 
                //$('#value2').append('进一步改变的aa值：'选择索引'  '); 
                __keyDown(selectId,selectIndex); 
                休息； 
            /*case ((热键 > 47 && 热键  64 && 热键  96 && 热键                 / /首字幕查询接口 
                //character = String.fromCharCode(hotkeys).toLowerCase(); 
                返回 false； 
                break;*/ 
            默认：
                返回 false； 
                休息； 
        }； 
    }) 
    .bind("blur",function(){ 
        __clearSelectMenu(selectId,selectZindex); 
        返回 false; 
    }); 
    // 禁止选择 
    $('.dropselectbox').bind("selectstart",function(){ 
            return false; 
    }); 
}； 
function __clearSelectMenu(selectId,selectZindex){ 
    //$('#value2').append('移除焦点：' selectIndex '  
'); 
    $('.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 ' > 选择 > 选项'), function(i){ 
        $('#' sID ' > div > ul').append(" " $(this).text() "
"); 
    }); 
    $('#' sID ' > div > h4').empty().append($('#' sID ' > 选择选项: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 ' > 选择选项:selected').text()); 
    //SELECT onchange 事件 
    $('#' sID '> select').change(); 
} 
/* 自动调用 */ 
$(document).ready(function(){ 
    var s = new Array(); 
    var t = document.getElementsByTagName('select '); 
    var j = 0; 
    for(var i=0;i        if(t[i].className=='commonselect'){ 
           s[j] = t[i]; 
            j ; 
        } 
    } 
    if(j==0)return; 
    var k = m = null; (var i=0;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 = ' '; 
        p.appendChild(div); 
        return div;     
    } 
}) 

 
HTML应用 