jQuery Select(单选单选) 模拟插件模拟插件 V1.3.62 改进版改进版
改进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事件后的代码:(如需原版请在作者主页下载)
复制代码 代码如下:
/*
* 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){