当前位置:Gxlcms > JavaScript > jQuerySelect(单选)模拟插件V1.3.62改进版_jquery

jQuerySelect(单选)模拟插件V1.3.62改进版_jquery

时间:2021-07-01 10:21:17 帮助过:3人阅读

首先感谢jQuery.Select.js的作者张经纬,jQuery.Select.js项目地址:http://www.zhangjingwei.com/archives/jquery-select%E5%8D%95%E9%80%89-%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6-v1-3-6/
项目中需要使用基于jQuery的Select模拟效果,主要是想实现select的onmouseover事件,而不需要点击在经过时即可进行选择,找了很多没有理想的,最后决定在jQuery.Select.js 1.3.6的基础上改进。

下面是增加mouseover事件后的代码:(如需原版请在作者主页下载)
代码如下:

/*
* jQuery Select Plugins v1.3.6.2
* Copyright (c) 2009 zhangjingwei
* Dual licensed under the MIT and GPL licenses.
* Date: 2009-11-17 09:37
* Revision: 1.3.6.2
* www.leadwit.com-浪子 modify in 2010-07-26 14:26
*/
(function($){
$.fn.extend({
sSelect: function() {
return this.each(function(i,obj){
var selectId = (this.name||this.id)+'__jQSelect'+i||'__jQSelect'+i;
if(obj.style.display != 'none' && $(this).parents()[0].id.indexOf('__jQSelect')<0){
var tabindex = this.tabIndex||0;
$(this).before("").prependTo($("#"+selectId));
var selectZindex = $(this).css('z-index'),selectIndex = $('#'+selectId+' option').index($('#'+selectId+' option:selected')[0]);
$('#'+selectId).append('

    ');
    $('#'+selectId+' h4').empty().append($('#'+selectId+' option:selected').text());
    var selectWidth=$('#'+selectId+' select').width();
    if($.browser.safari){selectWidth = selectWidth+15}
    $('#'+selectId+' h4').css({width:selectWidth});
    var selectUlwidth = selectWidth + parseInt($('#'+selectId+' h4').css("padding-left")) + parseInt($('#'+selectId+' h4').css("padding-right"));
    $('#'+selectId+' ul').css({width:selectUlwidth+'px'});
    $('#'+selectId+' select').hide();
    $('#'+selectId+' div').hover(function(){
    $('#'+selectId+' h4').addClass("over");
    },function(){
    $('#'+selectId+' h4').removeClass("over");
    });
    var timeobj;
    $('#'+selectId+' ul').bind("mouseover",function(e){
    clearTimeout(timeobj);
    });
    var click_fun =function(){
    $('#'+selectId+' h4').addClass("current");
    $('#'+selectId+' ul').show();
    var selectZindex = $('#'+selectId).css('z-index');
    if ($.browser.msie || $.browser.opera){$('.dropdown').css({'position':'relative','z-index':'0'});}
    $('#'+selectId).css({'position':'relative','z-index':'999'});
    $.fn.setSelectValue(selectId);
    selectIndex = $('#'+selectId+' li').index($('.selectedli')[0]);
    var windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $('#'+selectId).offset().top;
    var ulspace = $('#'+selectId+' ul').outerHeight(true);
    var windowspace2 = $('#'+selectId).offset().top - $(window).scrollTop() - ulspace;
    windowspace < ulspace && windowspace2 > 0?$('#'+selectId+' ul').css({top:-ulspace}):$('#'+selectId+' ul').css({top:$('#'+selectId+' h4').outerHeight(true)});
    $(window).scroll(function(){
    windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $('#'+selectId).offset().top;
    windowspace < ulspace?$('#'+selectId+' ul').css({top:-ulspace}):$('#'+selectId+' ul').css({top:$('#'+selectId+' h4').outerHeight(true)});
    });
    $('#'+selectId+' li').click(function(e){
    selectIndex = $('#'+selectId+' li').index(this);
    $.fn.keyDown(selectId,selectIndex);
    $('#'+selectId+' h4').empty().append($('#'+selectId+' option:selected').text());
    $.fn.clearSelectMenu(selectId,selectZindex);
    e.stopPropagation();
    e.cancelbubble = true;
    })
    .hover(
    function(){
    $('#'+selectId+' li').removeClass("over");
    $(this).addClass("over").addClass("selectedli");
    selectIndex = $('#'+selectId+' li').index(this);
    },
    function(){
    $(this).removeClass("over");
    }
    );
    }
    $('#'+selectId)
    .bind("focus",function(){
    //$.fn.clearSelectMenu(selectId,selectZindex);
    $('#'+selectId+' h4').addClass("over");
    })
    .bind("click",function(e){
    if($('#'+selectId+' ul').css("display") == 'block'){
    $.fn.clearSelectMenu(selectId,selectZindex);
    return false;
    }else{
    click_fun();
    };
    e.stopPropagation();
    })
    .bind("mouseover",function(e){
    if($('#'+selectId+' ul').css("display") == 'block'){
    //$.fn.clearSelectMenu(selectId,selectZindex);
    return false;
    }else{
    click_fun();
    };
    e.stopPropagation();
    })
    .bind("mouseout",function(e){
    if($('#'+selectId+' ul').css("display") == 'block'){
    timeobj = setTimeout(function(){
    $.fn.clearSelectMenu(selectId,selectZindex);
    },500);
    return false;
    }
    e.stopPropagation();
    })
    .bind('mousewheel', function(e,delta) {
    e.preventDefault();
    var mousewheel = {
    $obj : $('#'+selectId+' li.over'),
    $slength : $('#'+selectId+' option').length,
    mup:function(){
    this.$obj.removeClass("over");
    selectIndex == 0?selectIndex = 0:selectIndex--;
    $.fn.keyDown(selectId,selectIndex);
    },
    mdown:function(){
    this.$obj.removeClass("over");
    selectIndex == (this.$slength - 1)?selectIndex = this.$slength - 1:selectIndex ++;
    $.fn.keyDown(selectId,selectIndex);
    }
    }
    delta>0?mousewheel.mup():mousewheel.mdown();
    })
    .bind("dblclick", function(){
    $.fn.clearSelectMenu(selectId,selectZindex);
    return false;
    })
    .bind("keydown",function(e){
    $(this).bind('keydown',function(e){
    if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36){
    return false;
    }
    });
    var $obj = $('#'+selectId+' li.over'),$slength = $('#'+selectId+' option').length;
    switch(e.keyCode){
    case 9:
    return true;
    break;
    case 13:
    //enter
    $.fn.clearSelectMenu(selectId,selectZindex);
    break;
    case 27:
    //esc
    $.fn.clearSelectMenu(selectId,selectZindex);
    break;
    case 33:
    $obj.removeClass("over");
    selectIndex = 0;
    $.fn.keyDown(selectId,selectIndex);
    break;
    case 34:
    $obj.removeClass("over");
    selectIndex = ($slength - 1);
    $.fn.keyDown(selectId,selectIndex);
    break;
    case 35:
    $obj.removeClass("over");
    selectIndex = ($slength - 1);
    $.fn.keyDown(selectId,selectIndex);
    break;
    case 36:
    $obj.removeClass("over");
    selectIndex = 0;
    $.fn.keyDown(selectId,selectIndex);
    break;
    case 38:
    //up
    e.preventDefault();
    $obj.removeClass("over");
    selectIndex == 0?selectIndex = 0:selectIndex--;
    $.fn.keyDown(selectId,selectIndex);
    break;
    case 40:
    //down
    e.preventDefault();
    $obj.removeClass("over");
    selectIndex == ($slength - 1)?selectIndex = $slength - 1:selectIndex ++;
    $.fn.keyDown(selectId,selectIndex);
    break;
    default:
    e.preventDefault();
    break;
    };
    })
    .bind("blur",function(){
    $.fn.clearSelectMenu(selectId,selectZindex);
    return false;
    })
    .bind("selectstart",function(){
    return false;
    });
    }else if($(this).parents()[0].id.indexOf('__jQSelect')>0){
    selectId = $(this).parents()[0].id;
    $.fn.setSelectValue(selectId);
    var selectWidth=$('#'+selectId+' select').width();
    if($.browser.safari){selectWidth = selectWidth+15}
    $('#'+selectId+' h4').css({width:selectWidth});
    var selectUlwidth = selectWidth + parseInt($('#'+selectId+' h4').css("padding-left")) + parseInt($('#'+selectId+' h4').css("padding-right"));
    $('#'+selectId+' ul').css({width:selectUlwidth+'px'});
    if(this.style.display != 'none'){$(this).hide();}
    }})},
    clearSelectMenu:function(selectId,selectZindex){
    if(selectId != undefined){
    selectZindex = selectZindex||'auto';
    $('#'+selectId+' ul').empty().hide();
    $('#'+selectId+' h4').removeClass("over").removeClass("current");
    $('#'+selectId).css({'z-index':selectZindex});
    }
    },
    setSelectValue:function(sID){
    var content = [];
    $.each($('#'+sID+' option'), function(i){
    content.push("
  • "+$(this).text()+"
  • ");
    });
    content = content.join('');
    $('#'+sID+' ul').html(content);
    $('#'+sID+' h4').html($('#'+sID+' option:selected').text());
    $('#'+sID+' li').eq($('#'+sID+' select')[0].selectedIndex).addClass("over").addClass("selectedli");
    },
    keyDown:function(sID,selectIndex){
    var $obj = $('#'+sID+' select');
    $obj[0].selectedIndex = selectIndex;
    $obj.change();
    $('#'+sID+' li:eq('+selectIndex+')').toggleClass("over");
    $('#'+sID+' h4').html($('#'+sID+' option:selected').text());
    }
    });
    var types = ['DOMMouseScroll', 'mousewheel'];
    $.event.special.mousewheel = {
    setup: function() {
    if ( this.addEventListener )
    for ( var i=types.length; i; )
    this.addEventListener( types[--i], handler, false );
    else
    this.onmousewheel = handler;
    },
    teardown: function() {
    if ( this.removeEventListener )
    for ( var i=types.length; i; )
    this.removeEventListener( types[--i], handler, false );
    else
    this.onmousewheel = null;
    }
    };
    $.fn.extend({
    mousewheel: function(fn) {
    return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
    },
    unmousewheel: function(fn) {
    return this.unbind("mousewheel", fn);
    }
    });
    function handler(event) {
    var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
    event = $.event.fix(event || window.event);
    event.type = "mousewheel";
    if ( event.wheelDelta ) delta = event.wheelDelta/120;
    if ( event.detail ) delta = -event.detail/3;
    args.unshift(event, delta);
    return $.event.handle.apply(this, args);
    }
    })(jQuery);

    演示地址 http://demo.jb51.net/js/jQuery.Select/index.html
    打包下载 http://www.gxlcms.com/jiaoben/21397.html

    人气教程排行