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 相关文章推荐
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
AngularJS指令用法详解
Nov 02 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
element-ui中dialog弹窗关闭按钮失效的解决
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 和 MySQL 基础教程(一)
2006/10/09 PHP
Smarty安装配置方法
2008/04/10 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
深入解析php中的foreach函数
2013/08/31 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
python配置grpc环境
2019/01/01 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
优秀生推荐信范文
2013/11/28 职场文书
学生期末评语大全
2014/04/30 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
承诺书样本
2014/08/30 职场文书
水电工程师岗位职责
2015/02/13 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js