首页
所有分类
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 相关文章推荐
Javascript的闭包
Dec 31 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框
Mar 01 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 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
Counter(1) most_common(1) set(1) 字典(3) Next.js(1) 脚手架(2) frozenset(1) pip(1) SingleFlight(2) 并发(8)
You might like
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
微信红包随机生成算法php版
2016/07/21 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
公司总经理任命书
2014/06/05 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
老干部工作先进事迹
2014/08/17 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年组织部工作总结
2014/11/14 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
小马王观后感
2015/06/11 职场文书
超市员工管理制度
2015/08/06 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书