改进 jQuery Select(单选) 模拟插件 V1.3.6，增加mouseover事件

首先感谢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事件后的代码：（如需 原版请在作者主页下载）

 --------------------------------------------------------

Query Select Plugins v1.3.6.1

/*
 * jQuery Select Plugins v1.3.6.1
 * Copyright (c) 2009 zhangjingwei
 * Dual licensed under the MIT and GPL licenses.
 * Date: 2009-11-17 09:37
 * Revision: 1.3.6.1
 * leadwit.com-lz modify in  2010-07-16 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( " <div class='dropdown' id= " + selectId + "  tabIndex= " + tabindex + " ></div> " ).prependTo($( " # " + selectId));
         var  selectZindex  =  $( this ).css( ' z-index ' ),selectIndex  =  $( ' # ' + selectId + '  option ' ).index($( ' # ' + selectId + '  option:selected ' )[ 0 ]);
        $( ' # ' + selectId).append( ' <div class="dropselectbox"><h4></h4><ul></ul></div> ' );
        $( ' # ' + 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);
                    e.stopPropagation();
                }, 500 );
                 return   false ;
            }
        })
         .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( " <li class='FixSelectBrowser'> " + $( this ).text() + " </li> " );
        });
        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://www.leadwit.com/demo/jquery/jquery.select/index.html

 完 整代码及示例下载：

http://files.cnblogs.com/leadwit/jQuery.Select.1.3.6.2.rar