首页
所有分类
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 相关文章推荐
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联（二）
May 17 Javascript
详解Vue项目引入CreateJS的方法（亲测可用）
May 30 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
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
J2EE面试题(19) SOA面试题(9) 求职信(1029) 自我鉴定(671) Ruby面试题(15) Delphi面试题(13) 岗位职责(1324) 推荐信(292) 自荐信(981) 自我评价(886)
You might like
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
php抽象类用法实例分析
2015/07/07 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
python多重继承实例
2014/10/11 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
selenium 多窗口切换的实现（windows)
2020/01/18 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
CSS3教程：background-clip和background-origin
2008/10/17 HTML / CSS
四风对照检查剖析材料
2014/10/07 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
工作态度不好检讨书
2015/05/06 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL