/*
* 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 > option:selected').text());
$('.dropselectbox').css("display", 'block');
//取select的宽度 优先级 select样式中的宽度 - select自动的宽度 - 默认为60
var selectcssWidth = $('#' selectId '> select').css('width');
selectcssWidth = typeof(selectcssWidth) =='undefined' ? 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); //将原select的宽度赋值给生成的select（并不是h4的总宽度）
$('#' selectId ' > div > ul').css("width",selectWidth); //将h4的总宽度赋值给Ul
$('#' selectId ' > select').hide();
$('#' selectId ' > div').hover(function(){
$('#' selectId ' > div > h4').addClass("over");
$('#' selectId ' > div > span').addClass("over");
},function(){
$('#' selectId ' > div > h4').removeClass("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('点击：' selectIndex '
');
if($('#' selectId ' > div > ul').css("display") == 'block'){
__clearSelectMenu(selectId);
return false;
}else{
if ($.browser.opera){__clearSelectMenu();}
$('#' selectId ' > div > h4').addClass("current");
$('#' selectId ' > div > span').addClass("over").addClass("current");
$('#' selectId ' > div > ul').show();
var selectZindex = $(this).css('z-index');
if ($.browser.msie || $.browser.opera){
$('.dropdown').removeClass('overclass');
}
$('#' selectId).addClass('overclass');
__setSelectValue(selectId);
var windowspace = ($(window).scrollTop() document.documentElement.clientHeight) - $(this).offset().top;
var ulspace = $('#' selectId ' > div > ul').outerHeight(true);
var windowspace2 = $(this).offset().top - $(window).scrollTop() - ulspace;
if (windowspace < ulspace && 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 (windowspace
$('#' select id'> div > ul').css({top:-ulspace});
}else{
$('#' selectId ' > div > ul').css({top:$(' #'selectId'>div>h4').outerHeight(true)});
//响应鼠标点击选择
$('#' selectId ' > div > ul > li').click(function(e){
selectIndex = $('#' selectId ' > div > ul > li').index(this);
//$('鼠标点击：' selectIndex '
');
$ ('#' selectId '> select')[0].selectedIndex =
$('#' selectId ' > div > h4').empty().append($('#' selectId); ' > 选择 > 选项：已选择').text());
__clearSelectMenu(selectId,selectZindex);
e.stopPropagation(); e.cancelbuble = 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 false;
}
);*/
} )
.bind("dblclick", function(){
__clearSelectMenu();
返回 false;
})
.bind("keydown",function(e){
//var 热键 = e.keyCode;
$(this).bind('keydown',function(e){
if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36){
返回 false;
}
});
switch(e.keyCode){ //设置为true可给定case范围
case 9:
return true;
break;
case 13:
//enter
//$('#value2').append('按回车收到的值：' selectIndex '
');
__clearSelectMenu();
break;
case 27:
//esc
__clearSelectMenu();
break;
case 33:
$('#' selectId ' > div > ul > li').removeClass("over");
selectIndex = 0;
__keyDown(selectId,selectIndex);
break;
case 34:
$('#' selectId ' > div > ul > li').removeClass("over");
selectIndex = ($('#' selectId ' > select > option').length - 1);
__keyDown(selectId,selectIndex);
break;
case 35:
$('#' selectId ' > div > ul > li').removeClass("over");
selectIndex = ($('#' selectId ' > select > option').length - 1);
__keyDown(selectId,selectIndex);
break;
case 36:
$('#' selectId ' > div > ul > li').removeClass("over");
selectIndex = 0;
__keyDown(selectId,selectIndex);
break;
case 38:
//up
//$('#value2').append('原始值：' selectIndex '
');
$('#' selectId ' > div > ul > li').removeClass("over");
if (selectIndex == 0){
selectIndex = 0;
}else{
selectIndex--;
}；
//$('#value2').append('向上改变的aa值：' selectIndex ' ');
__keyDown(selectId,selectIndex);
休息；
case 40:
//down
//$('#value2').append('传递过来的：' selectIndex ' ');
$('#' selectId ' > div > ul > li').removeClass("over");
if (selectIndex == ($('#' selectId ' > 选择 > 选项').length - 1)){
selectIndex = $('#' selectId ' > 选择 > 选项' ).长度 - 1;
}否则{
selectIndex ;
}；
//$('#value2').append('进一步改变的aa值：'选择索引' ');
__keyDown(selectId,selectIndex);
休息；
/*case ((热键 > 47 && 热键 64 && 热键 96 && 热键 / /首字幕查询接口
//character = String.fromCharCode(hotkeys).toLowerCase();
返回 false；
break;*/
默认：
返回 false；
休息；
}；
})
.bind("blur",function(){
__clearSelectMenu(selectId,selectZindex);
返回 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 ' > 选择 > 选项'), function(i){
$('#' sID ' > div > ul').append(" " $(this).text() "");
});
$('#' sID ' > div > h4').empty().append($('#' sID ' > 选择选项: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 ' > 选择选项: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];
j ;
}
}
if(j==0)return;
var k = m = null; (var i=0;i k = s[i].parentNode;
m = createDiv(k, i)
//s[i].replaceNode; (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应用
