手记

JQuery SELECT单选模拟jQuery.select.js

基于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('<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的宽度 优先级 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+' <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)});
    }
    });
    //响应鼠标点击选择
    $('#'+selectId+' > div > ul > li').click(function(e){
    selectIndex = $('#'+selectId+' > div > ul > li').index(this);
    //$('#value2').append('鼠标点击:'+selectIndex+' <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){ //设置为true可给定case范围
    case 9:
    return true;
    break;
    case 13:
    //enter
    //$('#value2').append('按回车收到的值:'+selectIndex+' <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+' <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+' ');
    keyDown(selectId,selectIndex);
    break;
    case 40:
    //down
    //$('#value2').append('传递过来的:'+selectIndex+' ');
    $('#'+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+' ');
    keyDown(selectId,selectIndex);
    break;
    /case ((hotkeys > 47 && hotkeys < 59) || (hotkeys > 64 && hotkeys < 91) || (hotkeys > 96 && hotkeys < 123)):
    //首字幕查询预留接口
    //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('移除焦点:'+selectIndex+' <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();
    }
    / 自动调用 /
    $(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 = ' ';
    p.appendChild(div);
    return div;
    }
    })

HTML应用
复制代码 代码如下:

<!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} / 对于IE下层定位问题的修正样式 /
.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>

1人推荐
随时随地看视频
慕课网APP