JQuery SELECT单选模拟jQuery.select.js

为国除害是我

为国除害是我

2016-02-19 14:37

今天图老师小编给大家精心推荐个JQuery SELECT单选模拟jQuery.select.js教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~
基于jQuery JavaScript Library v1.3.2 的单选模拟
(本文件是跟据 zhangjingwei 的Jquery Select(单选) 模拟插件 V1.3.4 修改而来的)
a. 修改的主要原因是,原来的zhangjingwei的模拟在显示方式上的问题。在跟文字交替出现时会出现错位。现将模拟DIV的display修改为inline方式。更自然的嵌入到文本行中。
b.在加载文件后自动转化样式名为'commonselect' 的select。简化调用
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('div class="dropselectbox"h4/h4span class="FixSelectBrowserSpan"/spanul style="display:none" style="display:none"li/li/ul/div');
$('#'+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+' br');
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 ulspace) {
$('#'+selectId+' 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);
//$('#value2').append('鼠标点击:'+selectIndex+' br');
$('#'+selectId+' select')[0].selectedIndex = selectIndex;
$('#'+selectId+' div h4').empty().append($('#'+selectId+' select option:selected').text());
__clearSelectMenu(selectId,selectZindex);
e.stopPropagation();
e.cancelbubble = true;
//SELECT onchange 事件
$('#'+selectId+' select').change();
})
.hover(
function(){
$('#'+selectId+' div ul li').removeClass("over");
$(this).addClass("over").addClass("selectedli");
selectIndex = $('#'+selectId+' div ul li').index(this);
},
function(){
$(this).removeClass("over");
}
);
//End
};
e.stopPropagation();
})
.bind("mousewheel",function(){
//以后也许支持滚轮
/*$('#'+selectId+' div ul li').hover(
function(){
return false;
},
function(){
return false;
}
);*/
})
.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){
return false;
}
});
switch(e.keyCode){ //设置为true可给定case范围
case 9:
return true;
break;
case 13:
//enter
//$('#value2').append('按回车收到的值:'+selectIndex+' br');
__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+' br');
$('#'+selectId+' div ul li').removeClass("over");
if (selectIndex == 0){
selectIndex = 0;
}else{
selectIndex--;
};
//$('#value2').append('span style="color:red;" style="color:red;"向上改变的aa值:/span'+selectIndex+' ');
__keyDown(selectId,selectIndex);
break;
case 40:
//down
//$('#value2').append('传递过来的:'+selectIndex+' ');
$('#'+selectId+' div ul li').removeClass("over");
if (selectIndex == ($('#'+selectId+' select option').length - 1)){
selectIndex = $('#'+selectId+' select option').length - 1;
}else{
selectIndex ++;
};
//$('#value2').append('span style="color:blue;" style="color:blue;"向下改变的aa值:/span'+selectIndex+' ');
__keyDown(selectId,selectIndex);
break;
/*case ((hotkeys 47 && hotkeys 59) || (hotkeys 64 && hotkeys 91) || (hotkeys 96 && hotkeys 123)):
//首字幕查询预留接口
//character = String.fromCharCode(hotkeys).toLowerCase();
return false;
break;*/
default:
return false;
break;
};
})
.bind("blur",function(){
__clearSelectMenu(selectId,selectZindex);
return false;
});
//禁止选择
$('.dropselectbox').bind("selectstart",function(){
return false;
});
};
function __clearSelectMenu(selectId,selectZindex){
//$('#value2').append('移除焦点:'+selectIndex+' br');
$('.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 option'), function(i){
$('#'+sID+' div ul').append("li class='FixSelectBrowser'"+$(this).text()+"/li");
});
$('#'+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;it.length;i++){
if(t[i].className=='commonselect'){
s[j] = t[i];
j++;
}
}
if(j==0)return;
var k = m = null;
for(var i=0;is.length;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应用
代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleJQuery SELECT单选模拟/title
style type="text/css" bogus="1"
body,div,ul,h4,li {margin:0; padding:0; border:none; list-style:none; font-size:1;}
/*下拉列表select的commonselect样式 配合jquery.select插件 */
/* select style */
.dropdown {outline:none;z-index:1;display:inline-block;*display:inline; position:relative;}
.dropdown * {-moz-user-select:none;}
.dropselectbox{float:left; position:absolute}
.overclass{ z-index:999} /* 对于IE下层定位问题的修正样式 */
.dropdown h4{position:relative;cursor:default; text-indent:5px;text-align:left;display:block;overflow:visible; margin:0; height:20px;font:12px/21px Arial, Helvetica, sans-serif; border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E;padding-left:0px;}
.dropdown h4.over{border-color:#369;}
.dropdown h4.current{border-color:#003;}
.dropdown div {display:none;position:absolute; left:0px; top:0px;}
.dropdown span {position:absolute;top:4px; right:3px; background:url(ico.gif) no-repeat center; width:16px; height:14px;}
.dropdown ul{position:absolute;display:none;border:1px solid #AAA; background:#333;color:#8E867B;}
.dropdown ul li{text-indent:5px;background:#333;height:19px;display:block;cursor:default;font:400 12px/19px Arial, Helvetica, sans-serif;text-align:left;}
.dropdown ul li.over{background:#369; color:#FFF;}
/* select style */
/* input style */
input.txt{border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E; height:18px;line-height:18px;}
/style
script type="text/javascript" src="jquery132.js" src="jquery132.js"/script
script type="text/javascript" src="jquery.select.js" src="jquery.select.js"/script
/head
body style="background:none" style="background:none"
h1Jquery Select(单选) 模拟插件 V1.3.4/h1
form action="#" method="post" style="margin:10px;" style="margin:10px;"
类型:
select name="type" class="commonselect" id="test"
option value=""/option
option value="男"类型男/option
option value="女"类型女/option
/select
性别:
select name="sex" style="width:100px" onchange="alert(this.value);"
option value=""性别:/option
option value="男"男/option
option value="女"女/option
/select
input type="text" size="8" class="txt" name='input'
input type="submit" id="postform" value="提交表单" style="border:1px solid #000; height:23px; margin-left:20px;" /
/form
/body
/html

可以参考这篇文档http://www.jb51.net/jiaoben/21397.html
展开更多 89%)
分享
qqQQ
qzoneQQ空间
weibo微博

猜你喜欢

JQuery SELECT单选模拟jQuery.select.js

Web开发
JQuery SELECT单选模拟jQuery.select.js

jQuery select控制插件

Web开发
jQuery select控制插件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery select操作控制方法小结

Web开发
jQuery select操作控制方法小结

JQuery 获取和设置Select选项的代码

Web开发
JQuery 获取和设置Select选项的代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jQuery select的操作实现代码

Web开发
jQuery select的操作实现代码

Jquery操作Select 简单方便 一个js插件搞定

Web开发
Jquery操作Select 简单方便 一个js插件搞定

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Collections API定制实现(一)

Collections API定制实现(一)

jquery checkbox全选反选效果代码

jquery checkbox全选反选效果代码
下拉加载更多内容 ↓