jQuery Select(单选) 模拟插件 V1.3.62 改进版


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
Javascript 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
基于jquery的Repeater实现代码
Jul 17 #Javascript
javascript onmouseout 解决办法
Jul 17 #Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 #Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 #Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 #Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 #Javascript
JQUERY获取form表单值的代码
Jul 17 #Javascript
You might like
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
使用svg实现动态时钟效果
2018/07/17 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
浅谈python中set使用
2016/06/30 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
基于python实现名片管理系统
2018/11/30 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
Python进行特征提取的示例代码
2020/10/15 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
Python中如何定义一个函数
2016/09/06 面试题
金融系毕业生自荐书
2014/07/08 职场文书
转让协议书
2015/01/27 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书