插件描述：selectpick是一款jquery开发的美化下拉框插件，具有响应快，美观，灵活，兼容性好的优点。欢迎下载下来使用。
修改者 iulog.com
修改日期 2016-01-28
修改内容:
1.settings增加container容器的配置项 默认加载到body内
2.去除JS样式配置 改到css里控制
3.设置默认显示在div上的值(即selectText配置)为当前select的选中值
4.点击下拉选项后 同时设置原有下拉框select的值
5.提供重新激活被disabled的下拉框的方法
selectpick是一款jquery开发的美化下拉框插件，具有响应快，美观，灵活，兼容性好的优点。代码配置很简单。且也支持对象级联操作。
配置详情：
1 2 3 4 5 6 7 | var settings = { container:"body",//模拟select生成的DIV存放的父容器 height: 30, // 下拉框的高度 width: 150, // 下拉框的宽度 disabled: false, // 是否禁用,默认false不禁用 onSelect: "" // 点击后选中回调函数} |
重新激活被disabled的下拉框
1 2 3 4 | function enAble(){ $("#selectpick_test_2").parent().remove(); $("#test_2").selectpick({container:'.test_2',disabled:false});} |
使用：
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> $(function(){ $(".test").selectpick({ // 这里面是settings里面的配置项}); });</script><select class="test"> <option>请选择<option> <option>选项1<option></select> |
==============以下内容由 yulu 提供===========
//重置
1 2 3 | $("#reset").bind("click", function(event) { $(".selectpick_div_" + elem_id + " span").first().text($(obj).children("option").first().text());}); |
==========以下方法由___King。提供==================
点击下拉选项时最好提供键盘点击响应事件，点击上下方向键可进行选择。一下是我提供的键盘响应事件代码，可能有不足，但是可以借鉴一下。
/*响应键盘上、下方向、回车事件*/
document.onkeydown= function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 38) {
if ($(".selectpick_ul_selectOption").find($("li"))[0].className==$(".selectpick_ul_selectOption").find($(".selectpick_options_selected"))[0].className) {
return;
}
$(".selectpick_ul_selectOption").find($(".selectpick_options_selected")).css({
"background-color": "",
"color": "#000"
}).removeClass("selectpick_options_selected").prev().css({
"background-color": settings.optionColor,
"color": "#fff"
}).addClass("selectpick_options_selected");
}
if (e && e.keyCode == 40) {
var length = $(".selectpick_ul_selectOption").find($("li")).length;
if ($(".selectpick_ul_selectOption").find($("li"))[length-1].className==$(".selectpick_ul_selectOption").find($(".selectpick_options_selected"))[0].className) {
return;
}
$(".selectpick_ul_selectOption").find($(".selectpick_options_selected")).css({
"background-color": "",
"color": "#000"
}).removeClass("selectpick_options_selected").next().css({
"background-color": settings.optionColor,
"color": "#fff"
}).addClass("selectpick_options_selected"); }
if (e && e.keyCode == 13) { //enter 键
var value=$(".selectpick_ul_selectOption").find($(".selectpick_options_selected")).children("label").first().text();
var text = $(".selectpick_ul_selectOption").find($(".selectpick_options_selected")).children("label").first().next().text();
if (value==""&&text=="") {
return;
}
$(".selectpick_div_" + elem_id + " span").first().text($(".selectpick_ul_selectOption").find($(".selectpick_options_selected")).children("label").first().next().text());
$(".selectpick_options_" + elem_id).empty().hide();
// 回调函数
if (settings.onSelect != undefined && settings.onSelect != "" && typeof settings.onSelect == "function") {
settings.onSelect(value,text);
}
}
}
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： js贪吃蛇
- 下一个特效： jquery自定义滚动条