jQuery Select(單選) 模擬插件 V1.3.62 改進(jìn)版
更新時(shí)間：2010年07月17日 18:09:15 作者：
改進(jìn)jQuery Select(單選) 模擬插件 V1.3.6，增加mouseover事件
首先感謝jQuery.Select.js的作者張經(jīng)緯，jQuery.Select.js項(xiàng)目地址：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/
項(xiàng)目中需要使用基于jQuery的Select模擬效果，主要是想實(shí)現(xiàn)select的onmouseover事件，而不需要點(diǎn)擊在經(jīng)過時(shí)即可進(jìn)行選擇，找了很多沒有理想的，最后決定在jQuery.Select.js 1.3.6的基礎(chǔ)上改進(jìn)。
下面是增加mouseover事件后的代碼：（如需原版請?jiān)谧髡咧黜撓螺d）
復(fù)制代碼 代碼如下:
/*
* 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.dbjr.com.cn/jiaoben/21397.html
您可能感興趣的文章:
相關(guān)文章
jQuery實(shí)現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶右側(cè)索引功能的通訊錄,結(jié)合實(shí)例形式分析了jQuery針對頁面元素動(dòng)態(tài)遍歷、排序等相關(guān)操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了thinkphp 表名 大小寫 竅門,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了完善的jquery處理機(jī)制的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-02-02
jQuery實(shí)現(xiàn)點(diǎn)擊小圖片淡入淡出顯示大圖片特效
本文給大家分享基于jquery實(shí)現(xiàn)的一款圖片特效，當(dāng)點(diǎn)擊小圖片時(shí)會(huì)淡入淡出大圖片，通過定義需要展示的圖片以及圖片要展示的時(shí)間，來實(shí)現(xiàn)這一效果，感興趣的朋友跟著小編一起來學(xué)習(xí)吧2015-09-09
jquery ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼
ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼，這里用到了jquery，當(dāng)然如果不想用，可以參考腳本之前發(fā)布的文章。2009-09-09
很多朋友不清楚(function(){... })();這幾種寫法各代表是什么意思，下面小編通過本教程給大家簡單介紹下(function(){... })();知識，感興趣的朋友跟著小編一起學(xué)習(xí)吧2016-08-08
關(guān)于webuploader插件使用過程遇到的小問題
這篇文章主要為大家詳細(xì)解決了關(guān)于webuploader插件使用過程遇到的小問題,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Tipso是一款基于jQuery的Tooltip提示框插件，他提供了眾多參數(shù)，如顯示動(dòng)畫持續(xù)時(shí)間、背景顏色、文本顏色、顯示位置、加載ajax內(nèi)容、回調(diào)函數(shù)等等。2015-05-05
這篇文章主要介紹了jQuery中append()方法用法,以實(shí)例形式較為詳細(xì)的分析了append()方法的功能、定義與使用技巧,并對比分析了與text()方法的區(qū)別,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了jquery遍歷json對象集合、jQuery 遍歷JSON對象、jquery中遍歷讀取json串中的對象三種情況，感興趣的小伙伴們可以參考一下2016-05-05