JQuery SELECT单选模拟jQuery.select.js

2020-05-22 16:30:34易采站长站整理

基于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”);