JQuery SELECT 無線シミュレーション jQuery.select.js_jquery

jQuery JavaScript ライブラリ v1.3.2 に基づく単一選択シミュレーション
(このファイルは、zhangjingwei の Jquery Select (ラジオ選択) シミュレーション プラグイン V1.3.4 に基づいて変更されています)
a。オリジナルのZhangjingwei氏のシミュレーションは表示方法に問題がありました。文字と交互に表示するとズレが生じます。次に、シミュレートされた DIV の表示をインライン モードに変更します。より自然にテキスト行に埋め込まれます。
b. ファイルをロードした後、「commonselect」という名前の選択スタイルを自動的に変換します。呼び出しを簡略化します
c. select の onchange() イベントへの応答。幅取得の微調整
jquery.select.js

コードをコピー コードは次のとおりです。

/*
* jQuery.select.js
*/
jQuery.fn.sSelect = function(){
    var selectId = $(this).attr('id');
    var selectZindex = $(this).css('z-index');
    var selectIndex = $('#'+selectId+' > select > option').index($('#'+selectId+' > select > option:selected')[0]);
    $('#'+selectId).append('

');
$('#' selectId ' > div > h4').empty().append($('#' selectId ' > select > オプション:選択済み').text() );
$('.dropselectbox').css("display", 'block');

//選択スタイルの幅の優先順位を取得します - 自動幅を選択します。は 60
var selectcssWidth = $('#' selectId '> select').css('width');
selectcssWidth = typeof(selectcssWidth) =='unknown' 0 : parseInt(selectcssWidth.replace) ('px','')) 5 ;
var selectWidth = selectcssWidth ? selectcssWidth : ( $('#' selectId '> select').width() > 0 ? $('#' selectId '> ; select').width() 5 : 60);
$('#' selectId).css("margin-right",selectWidth); // オフセットを変更します
$('#' selectId ' > ; div > h4').css("width", selectWidth); // 元の選択の幅を生成された選択に割り当てます (h4 の合計の幅ではありません)
$('#' selectId ' > ; div > ul').css("width",selectWidth) //h4 の合計幅を Ul に代入します。 $('#' selectId ' > select')
$ ('#' selectId ' > div').hover(function(){
$('#' selectId ' > div > h4').addClass("over");
$( ' #' selectId ' > ("over");
$('#' selectId ' > div > span').removeClass("over"); ' selectId)
.bind("focus",function(){
__clearSelectMenu();
$('#' selectId ' > div > h4').addClass("over");
$( '#' selectId ' > div > span').addClass("over");
})
.bind("click",function(e){
/ /$('# value2').append('Click: ' selectIndex '
');
if($('#' selectId ' > div > ul').css("display" ) == 'block '){

return false; $('#' selectId ' > div > h4')。 addClass ("現在") 🎜> $(' #' selectId ' > ul').show(); $.browser.opera){ ('オーバークラス') '#' selectId ' > if ( windowspace && windowspace2 > 0) {
$('#' selectId ' > div > ul').css({top:-ulspace});
}else{
$('#' selectId ' > div > ul').css({top:$('#' selectId ' > div > h4').outerHeight(true) });
}
selectIndex = $('#' selectId ' > div > ul > li').index($('.selectedli')[0]);
$(window).scroll(function(){
var windowspace = ($(window).scrollTop() document.documentElement.clientHeight) - $('#' selectId).offset().top;
var ulspace = $('#' selectId ' > div > ul').outerHeight(true);
if (windowsspace $( '#' selectId ' > div > ul').css({top:-ulspace});
}else{
$('#' selectId ' > div > ul').css({top:$(' #' selectId ' > h4').outerHeight(true)});
});
//响应鼠标点击选择
$('#' selectId ' > div > ul > li').click(function(e){
selectIndex = $('#' selectId ' > div > li').index(this)> //$('#value2').append(' selectIndex '
'); $ ('#' selectId '> select')[0].selectedIndex = selectIndex;
$('#' selectId ' > div > h4').empty().append($('#' selectId ' > オプション:selected').text());
__clearSelectMenu(selectId,selectZindex); e.stopPropagation(); e.cancelbubble = true;
// SELECT onchange イベント
$('#' selectId '> select').change();)
.hover(
function(){
$('#' selectId ' > div > ul > li').removeClass("over");
$(これ) .addClass("over").addClass("selectedli");
selectIndex = $('#' selectId ' > div > ul > li').index(this);

function(){
$(this).removeClass("over");
);
//終了
};
e.stopPropagation();
})
.bind("mousewheel",function(){
//以後也许支持滚轮
/*$('#' selectId ' > div > ul > li' ).hover(
function(){
return false;
},
function(){
return
}
);*/
} )
.bind("dblclick", function(){
__clearSelectMenu();
return false;
})
.bind("keydown",function(e){
//var hotkeys = e.keyCode;
$(this).bind('keydown',function(e){
if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36){

}
});
switch(e.keyCode){ //ケース範囲を指定するには true に設定します
case 13:

//$( '#value2').append('値Enter キーを押して受信: ' selectIndex > ケース 27:
$('#' selectId ' > div > ul > li').removeClass ( "オーバー");
selectIndex = 0; $('#' selectId ' > div > ul > li').removeClass("over");
selectIndex = ($('#' selectId ' > select > option').length - 1);
selectIndex = ($('# ' selectId ' > select > オプション').length - 1);
__keyDown(selectId,selectIndex);
ケース 36:
('#' selectId ' > div > ul > li').removeClass("over");
selectIndex = 0; > case 38:
// up
//$(' #value2').append('元の値: ' selectIndex ' ).removeClass("over");else{
selectIndex--;
};
//$('#value2').append('向上改变的aa值：' selectIndex ' ');
__keyDown(selectId,selectIndex);
休憩;
ケース 40:
//down
//$('#value2').append('传递过来的：' selectIndex ' ');
$('#' selectId ' > div > ul > li').removeClass("over");
if (selectIndex == ($('#' selectId ' > select > option').length - 1)){
selectIndex = $('#' selectId ' > select > option' ).長さ - 1;
}else{
selectIndex ;
};
//$('#value2').append('方向下改变的aa值：' selectIndex ' ');
__keyDown(selectId,selectIndex);
休憩;
/*case ((ホットキー > 47 && ホットキー 64 && ホットキー 96 && ホットキー //character = String.fromCharCode(hotkeys).toLowerCase();
false を返します。
break;*/
デフォルト:
falseを返します。
休憩;
};
})
.bind("blur",function(){
__clearSelectMenu(selectId,selectZindex);
return false;
});
// 禁止选择
$('.dropselectbox').bind("selectstart",function(){
return false;
});
};
function __clearSelectMenu(selectId,selectZindex){
//$('#value2').append('移除焦点：' selectIndex '
');
$('.dropselectbox > ul').empty().hide();
$('.dropselectbox > h4').removeClass("over").removeClass("current");
$('.dropselectbox > span').removeClass("over");
$('#' selectId).removeClass('overclass');
}
function __setSelectValue(sID){
$('#' sID ' > div > ul').empty();
$.each($('#' sID ' > select > オプション'), function(i){
$('#' sID ' > div > ul').append("

" $(this).text() "

");
});
$('#' sID ' > div > h4').empty().append($('#' sID ' > select option:selected').text());
$('#' sID ' > div > ul > li').eq($('#' sID '> select')[0].selectedIndex).addClass("over"). addClass("selectedli");
}
function __keyDown(sID,selectIndex){
$('#' sID '> select')[0].selectedIndex = selectIndex;
$('#' sID ' > div > ul > li:eq(' selectIndex ')').toggleClass("over");
$('#' sID ' > div > h4').empty().append($('#' sID ' > select option:selected').text());
//SELECT onchange イベント
$('#' sID '> select').change();
}
/* 自動调用 */
$(document).ready(function(){
var s = new Array();
var t = document.getElementsByTagName('select ');
var j = 0;
for(var i=0;i if(t[i].className=='commonselect'){ > s[j] = t[i];

if(j==0)return;
var k = m = null; (var i=0;i k = s[i].parentNode;
m = createDiv(k, i); (m);
k.replaceChild(m,s[i])
m.appendChild(s[i]);
$('#selectbox' i).sSelect(); }
function createDiv(p, i){
var div = document.createElement('div');
div.className = 'dropdown';
div.id = 'selectbox' i;
div.innerHTML = ' ';
p.appendChild(div);
return div;
}
})


HTML应用

复制代码

代码如下: