jQuery Select(라디오 선택) 시뮬레이션 플러그인 V1.3.62 향상된 버전_jquery

먼저 jQuery.Select.js 작성자인 Zhang Jingwei에게 감사드립니다. jQuery.Select.js 프로젝트 주소: http://www.zhangjingwei.com/archives/jquery-select radio-simulation 플러그인-v1-3 -6/
프로젝트에서 jQuery 기반 Select 시뮬레이션 효과를 사용해야 합니다. 주요 목적은 지나갈 때 클릭할 필요 없이 선택의 onmouseover 이벤트를 구현하는 것입니다. .이상하지 않은 것을 많이 발견하고 최종적으로 jQuery.Select.js 1.3.6을 기반으로 개선했습니다.

다음은 마우스오버 이벤트를 추가한 후의 코드입니다. (원본을 원하시면 작가 홈페이지에서 다운로드 받으세요.)

복사하세요 코드코드는 다음과 같습니다.

/*
* 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("

").prependTo($("#"+selectId));
var selectZindex = $(this).css('z-index'),selectIndex = $('#'+selectId+' option').index($('#'+selectId+' option:selected')[0]);
$('#'+selectId).append('

');
$('#' 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 ' 선택').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;
창 공간 < ulspace && windowspace2 > 0?$('#' selectId ' ul').css({top:-ulspace}):$('#' selectId ' ul').css({top:$('#' selectId ' h4'). 외부 높이(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(" 표시") == '차단'){
//$.fn.clearSelectMenu(selectId,selectZindex);
return false;
}else{
click_fun();
};
e.stopPropagation();
})
.bind("mouseout",function(e){
if($('#' selectId ' ul').css("display" ) == '차단'){
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(){
이것입니다. $obj.removeClass("오버");
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);
false 반환;
})
.bind( "keydown",function(e){
$(this).bind('keydown',function(e){
if (e.keyCode == 40 || e.keyCode == 38 || e .keyCode == 35 || e.keyCode == 36){
false 반환
}
});
var $obj = $('#' selectId 'li.over'),$slength = $('#' selectId ' option').length;
switch(e.keyCode){
case 9:
return true;
휴식;
사례 13:
//enter
$.fn.clearSelectMenu(selectId,selectZindex);
휴식;
사례 27:
//esc
$.fn.clearSelectMenu(selectId,selectZindex);
휴식;
사례 33:
$obj.removeClass("over");
selectIndex = 0;
$.fn.keyDown(selectId,selectIndex);
휴식;
사례 34:
$obj.removeClass("over");
selectIndex = ($slength - 1);
$.fn.keyDown(selectId,selectIndex);
휴식;
사례 35:
$obj.removeClass("over");
selectIndex = ($slength - 1);
$.fn.keyDown(selectId,selectIndex);
휴식;
사례 36:
$obj.removeClass("over");
selectIndex = 0;
$.fn.keyDown(selectId,selectIndex);
휴식;
사례 38:
//up
e.preventDefault();
$obj.removeClass("over");
selectIndex == 0?selectIndex = 0:selectIndex--;
$.fn.keyDown(selectId,selectIndex);
휴식;
사례 40:
//down
e.preventDefault();
$obj.removeClass("over");
selectIndex == ($slength - 1)?selectIndex = $slength - 1:selectIndex ;
$.fn.keyDown(selectId,selectIndex);
휴식;
기본값:
e.preventDefault();
휴식;
};
})
.bind("blur",function(){
$.fn.clearSelectMenu(selectId,selectZindex);
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 != 정의되지 않음){
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 '옵션'), function(i){
content.push("

" $(this).text() "

")
});
콘텐츠 = content.join('');
$('#' sID 'ul').html(content);
$('#' sID ' h4').html($('#' sID ' 옵션:선택됨').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 ' 옵션:선택됨').text());
}
});
var type = ['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 = 핸들러;
},
teardown: function() {
if ( this.removeEventListener )
for ( var i=types.length; i; )
this.removeEventListener( 유형[--i ], 핸들러, 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)
}
});
함수 핸들러(이벤트) {
var args = [].slice.call( 인수, 1 ), delta = 0, returnValue = true;
이벤트 = $.event.fix(이벤트 || window.event);
event.type = "마우스휠";
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
args.unshift(이벤트, 델타);
$.event.handle.apply(this, args)를 반환합니다.
}
})(jQuery);

演示地址 http://demo.jb51.net/js/jQuery.Select/index.html
打包下载 http://www. jb51.net/jiaoben/21397.html