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

首先感谢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.jb51.net/js/jQuery.Select/index.html
打包下载 http://www.jb51.net/jiaoben/21397.html

时间： 2024-10-28 04:21:12

jQuery Select(单选) 模拟插件 V1.3.62 改进版_jquery的相关文章

JQuery SELECT单选模拟jQuery.select.js_jquery

基于jQuery JavaScript Library v1.3.2 的单选模拟 (本文件是跟据 zhangjingwei 的Jquery Select(单选) 模拟插件 V1.3.4 修改而来的) a. 修改的主要原因是,原来的zhangjingwei的模拟在显示方式上的问题.在跟文字交替出现时会出现错位.现将模拟DIV的display修改为inline方式.更自然的嵌入到文本行中. b.在加载文件后自动转化样式名为'commonselect' 的select.简化调用 c.对select的o

jQuery表单美化插件jqTransform使用详解_jquery

jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+,插件还是很不错的,使用起来也很简单,推荐学习和使用. 使用方法: 1.加载jQuery和插件 <script type="te

Jquery Select操作方法集合脚本之家特别版_jquery

jQuery这个框架方便了我们对于HTML元素的操作,本来以为自己对于Select操作也算是熟悉了,但上午在测试的时候才发现自己了解的还真不多. 看了一下jQuery的一些方法后,理出了一些常用的方法,列在下面: //获取第一个option的值 $('#test option:first').val(); //最后一个option的值 $('#test option:last').val(); //获取第二个option的值 $('#test option:eq(1)').val(); //获取

jquery+css+ul模拟列表菜单具体实现思路_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

jQuery实现的模拟弹出窗口功能示例_jquery

本文实例讲述了jQuery实现的模拟弹出窗口功能.分享给大家供大家参考,具体如下: //初始化文档 $(document).ready(); //----------------弹出DIV仿模态窗口开始---------------- var divW; //DIV宽度 var divH; //DIV高度 var clientH; //浏览器高度 var clientW; //浏览器宽度 var divTitle; //DIV标题 var pageUrl; //DIV中加载的页面 var div

基于jQuery的消息提示插件之旅 DivAlert(三)_jquery

本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些. 2.0版本 复制代码 代码如下: //设置插件基本信息 var options = o || {}; options.width = o.width || 300; //提示框宽度若小于104px则自动重置为200px if (options.height > 104) { options.height = o.height; } else { options.height = 200

jQuery图片轮播插件——前端开发必看_jquery

还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了,觉得这些也是so easy的嘛,于是为了加深对js.jQuery的理解以及探究网站上各种效果的实现方法,就有了jQuery插件之路这样一个系列,当然为了纪念当初对轮播的执念,于是就从轮播开始写了一个小小的插件,这只是一个开始,随着后面的了解的更多,也会写一些更加绚丽的DEMO.有兴趣的朋友可以去看

jQuery密码强度检测插件passwordStrength用法实例分析_jquery

本文实例讲述了jQuery密码强度检测插件passwordStrength用法.分享给大家供大家参考,具体如下: 这里赋予密码强度为10个等级(实例中的progressImg1.png是一张包含十个状态的图片),然后通过设置每 个状态的CSS样式来直观地显示当前密码的强度.其中,实现此功能的重点和难点就是通过正则进行判断等级,有兴趣的朋友可以慢慢探究. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-passwordStrength

jQuery 如何给Carousel插件添加新的功能_jquery

本文是小编自己写的一个给carousel插件添加新功能,关于Carousel插件的教学视频.参考别的网站,当鼠标放在下排按钮上或者点击之后,Carousel就会跟这个按钮相同下标的li作为第一帧显示. 所有的代码都在这里https://github.com/wwervin72/jQuery-Carousel 那么说干就干,首先我们要做的就是要把这些按钮显示出来.于是我们就需要在Carousel的原型对象prototype上添加一个方法,用于生成切换幻灯片的按钮. switchSlideBtn :