社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > JQuery SELECT单选模拟jQuery.select.js_jquery

JQuery SELECT单选模拟jQuery.select.js_jquery

WBOY
发布： 2016-05-16 18:41:45
原创
1025 人浏览过

基于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 < 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                     $('#' 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应用


    复制代码如下代码：





    JQuery SELECT单选模拟





        

    Jquery Select(单选) 模拟插件 V1.3.4


        

        类型：
        
        性别:
        
        
        
        




    可以参考这篇文档http://www.jb51.net/jiaoben/21397.html
    相关标签：
    jquery select
    来源：php.cn
    上一篇：jQuery checkbox全选/取消全选实现代码_jquery 下一篇：jQuery帮助之CSS尺寸(五)outerHeight、outerWidth_jquery
    本站声明
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    作者最新文章
    最新问题
    使用 Javascript / Jquery 提交表单且不带按钮 我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...
    来自于 2024-04-06 14:54:03
    0
    2
    421
    如何使用 jquery 检索 HTML 数据表中未选定行的值 我试图获取所有未单击按钮的行的值。例如，当我单击第一行上的按钮时，我想检索没有单击的行的值。vartable=document.getElementById("all_d...
    来自于 2024-04-05 09:26:49
    0
    1
    1418
    需要一个 jquery 脚本，根据最终用户的当前选择从选择框中移动选定的选项 我有一个HTML页面，最终用户可以通过选择框元素对我们的项目进行排名。请参阅小提琴来观看简单的演示：https://jsfiddle.net/Balkanlii/ghecv1j8/...
    来自于 2024-04-04 18:40:04
    0
    1
    3528
    我已经通过书签在纯 CSS 中创建了一个元素。它已创建，但不可见 我的代码如下：g=document.createElement('div');g.setAttribute("id","divcontainer&qu...
    来自于 2024-04-04 17:27:27
    0
    1
    417
    在 Safari/Firefox iOS 上无法发送表单数据 这适用于除iOS上的Safari/Firefox之外的所有平台：jQuery("#gform_1").one('submit',function(event){...
    来自于 2024-04-04 12:53:48
    0
    1
    303
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    相关教程
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板