jquery-div模拟下拉列表框(Select)插件

时间: 2013-12-9 分类: Javascript 作者: SAI

TAGS:

最近要用到Select标签,但是数据比较多,使用默认的标签必须要下拉框超过一定高度,滚动条才出现,人为的设定下拉框的高度,并不能够达到想要的效果,尝试了一段时间,放弃了这个想法,决定找一个div模拟下拉框的插件,这样不仅能够达到想要的效果,其展示也会更漂亮。

从网络上找到了一个“jQuery Select(单选) 模拟插件 V1.3.6”,功能也比较强,应用到系统中,出了不

 

少问题,对这个插件进行了一些修改,但并没有达到理想效果,折腾了不少时间,终究还是决定自己写一个。这个功能较为简单,只是简单的模拟出下拉框。

实现比较简单,就是在页面上添加一个宿主input标签,用于存储数据并占位,之后使用div+ul+li模拟一个层,li模拟出排列的option,并对li的点击添加选中事件并处理数据,同时添加一些展示效果。当列表的数值大于8时,我设定了div的高度为150px,用此限定列表框的整体高度,并出现滚动条,这里的8(对应代码_count > 8)及150px我都写死了,可以通过修改该扩展将这两个值做成可配置的,将会更灵活,不过我从整体效果上看了看,高度150px用起来感觉刚好。代码如下:

 

$.fn.SimulateSelect = function(data, f) {
var inOb = $(this);
var currentid = $(this).attr(“id”);
var id = ‘divSelect’ + currentid;
var width = $(this).width();
$(this).hide();
$(this).parent().append(‘<div id=”a_’ + id + ‘”></div>’ + ‘<div id=”b_’ + id + ‘”></div>’);
$(‘#a_’ + id).addClass(“dropselectbox dropdown”).css({
‘width': width – 22
}).html(”).html($(this).val());
$(‘#a_’ + id).click(function(eb) {
$(‘#b_’ + id).show();
try {
eb.stopPropagation();
}
catch (e) {
event.cancelBubble = true;
}
});
var changeleft = false;
// 这里只针对IE8,其他浏览器无此问题
if ($.browser.msie)
changeleft = ($.browser.version) >= 8;
if (changeleft) {
$(‘#b_’ + id).addClass(“ullist”).css({
‘width': width – 16,
‘top': $(‘#a_’ + id).offset().top + 22
}).hide();
} else {
$(‘#b_’ + id).addClass(“ullist”).css({
‘width': width – 16,
‘top': $(‘#a_’ + id).offset().top + 22,
‘left': $(‘#a_’ + id).offset().left
}).hide();
}
$(‘<ul style=”margin:0;”></ul>’).appendTo($(‘#b_’ + id));
var _count = 0;
$.each(data.value, function(o, ov) {
_count++;
$(“<li/>”).html(ov).attr(‘v’, ov).click(function(eb) {
$(inOb).val($(this).attr(‘v’));
$(‘#a_’ + id).html(”).html($(this).html());
$(“#” + currentid).val($(this).html());
$(‘#b_’ + id).hide()
if (f)
f($(this).attr(‘v’), $(this).html());
try {
eb.stopPropagation();
}
catch (e) {
event.cancelBubble = true;
}
}).hover(function() {
$(‘#b_’ + id).find(‘li[class=floatred]’).removeClass(‘floatred’);
$(this).addClass(‘floatred’);
$(‘#b_’ + id).find(‘li’).removeClass(“over”);
$(this).addClass(“over”).addClass(“selectedli”);
}, function() {
$(this).removeClass(‘floatred’);
$(this).removeClass(“over”);
}).appendTo($(‘#b_’ + id + ‘ ul’));
});
// 绑定初始值
if (data.select != “”) {
$(‘#a_’ + id).html(”).html(data.select);
$(“#” + currentid).val(data.select);
}
if (_count > 8) {
$(‘#b_’ + id).find(“ul”).css(“height”, “150px”);
}
var liobj = $(‘#b_’ + id).find(‘li[v=’ + inOb.val() + ‘]’);
if (liobj.html()) {
liobj.addClass(‘floatred’);
$(‘#a_’ + id).html(liobj.html());
}
else {
inOb.val(”);
}
$(document).click(function() {
$(“#b_” + id).hide();
});
};

 

使用方法:

1 在页面上声明一个input对象进行占位:

<input id=”selFilter” type=”text” style=”width: 100px;” readonly=”readonly” month=”1″ />

2 在页面载入时执行一下语句:

$(function() {               $(“#selFilter”).SimulateSelect({value:{1:”2008″,2:”2007″,3:”2006″},select:”})         });

css,其中还用到了一个小下拉图标,这个随便找一个就行了:

<style>     .ullist ul li{text-indent:5px; margin: 0;padding:0; list-style:none; display:block; cursor:default;}     .ul li.over{}     .dropselectbox {border:1px solid #ccc;overflow:hidden; display:inline;float:left; padding-left:4px; background-color:#fff;}     .dropdown {height:21px, font:12px/21px Arial, Helvetica, sans-serif; border:solid 1px #AAA; background:url(../image/arrow.gif) no-repeat right center;}     .dropdown .over{border-color:#369; background-image:url(../image/droparrowover.gif); }     .dropdown .current{ border-color:#003;}     .ullist ul {border:1px solid #aaa; backgruond:#fff; overflow-y :auto} .ullist ul li{ background:#fff; height:19px; font:400 12px/19px Arial, Helvetica, sans-serif;}     .ullist ul li.over{background:#369; color:#fff;}     .ullist {background-color:#fff; position:absolute; overflow-y:auto; overflow-x: hidden; z-index: 20; margin: 0; padding:0;}        </style>

 

Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » Javascript » jquery-div模拟下拉列表框(Select)插件
本文地址:http://www.saiody.com/?p=1077

返回顶部