首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JQuery SELECT单选模拟jQuery.select.js

Posted in Javascript onNovember 12, 2009

基于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>

可以参考这篇文档https://3water.com/jiaoben/21397.html

JQuery SELECT单选模拟jQuery.select.js

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
高性能web开发 如何加载JS，JS应该放在什么位置？
May 14 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
javascript轮播图算法
Oct 21 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
详解javascript对数组和json数组的操作
Apr 15 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 #Javascript
jquery控制listbox中项的移动并排序
Nov 12 #Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 #Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 #Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 #Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 #Javascript
Javascript 定时器调用传递参数的方法
Nov 12 #Javascript
PL-880(1) 电台(1) 天线(6) 发报机(1) 电路图(1) LW(1) SW(1) 短波(1) 电磁辐射(1) 调幅(1)
You might like
php防盗链的常用方法小结
2010/07/02 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
Python contextlib模块使用示例
2015/02/18 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
利用PyCharm操作Github(仓库新建、更新，代码回滚)
2019/12/18 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Python常用编译器原理及特点解析
2020/03/23 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
酒吧创业计划书
2014/01/18 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
新书发布会策划方案
2014/06/09 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript