Posted in Javascript onJuly 17, 2010
首先感谢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("<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); },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("<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://demo.3water.com/js/jQuery.Select/index.html
打包下载 https://3water.com/jiaoben/21397.html
jQuery Select(单选) 模拟插件 V1.3.62 改进版
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@