jQuery Select (ラジオ選択) シミュレーション プラグイン V1.3.62 改良版 version_jquery

まず、jQuery.Select.js の作者である Zhang Jingwei に感謝します。jQuery.Select.js プロジェクトのアドレス: http://www.zhangjingwei.com/archives/jquery-select radio-simulation plug-in-v1-3 -6/
jQuery ベースの Select シミュレーション エフェクトをプロジェクトで使用する必要があります。主な目的は、通過時にクリックすることなく select の onmouseover イベントを実現することです。色々と理想的ではなかったのですが、最終的には jQuery.Select.js 1.3.6 をベースに改良しました。

マウスオーバーイベントを追加した後のコードは次のとおりです: (オリジナル版が必要な場合は、作者のホームページからダウンロードしてください)

をコピーしますcodeコードは次のとおりです:

/*
* 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 ' 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;
ウィンドウスペース
ウルスペース && ウィンドウスペース 2 > 0?$('#' selectId ' ul').css({top:-ulspace}):$('#' selectId ' ul').css({top:$('#' selectId ' h4').外側の高さ(true)});
$(window).scroll(function(){
windowsspace = ($(window).scrollTop() document.documentElement.clientHeight) - $('#' selectId).offset().top;
windowsspace < 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 ' オプション:selected').text()); .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") == 'ブロック'){
$.fn.clearSelectMenu(selectId,selectZindex)
return false;
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);
return
; }
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);
}
}
デルタ>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){
ケース 9:
true を返します。
休憩;
ケース 13:
//
$.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);
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 != 未定義){
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(コンテンツ);
$('#' 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( タイプ[--i], ハンドラー, false );
else
this.onmousewheel = ハンドラー;
},
teardown: function() {
if ( this.removeEventListener )
for ( var i=types.length; i; )
this.removeEventListener( types[--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);
}
});
function handler(event) {
var args = [].slice.call(arguments, 1 ), delta = 0, returnValue = true;
event = $.event.fix(event || window.event);
event.type = "マウスホイール";
if (event.wheelDelta ) デルタ =event.wheelDelta/120;
if (event.detail) デルタ = -event.detail/3;
args.unshift(イベント, デルタ);
return $.event.handle.apply(this, args);
}
})(jQuery);

演示地址
http://demo.jb51.net/js/jQuery.Select/index.html打包下ダウンロード
http://www. jb51.net/jiaoben/21397.html