这是效果图。上面一个过滤标签。下面弹出框，选择日，周，月。我的用途主要是报表查询的时候根据这３种类型来查询数据用的。
这里分享下代码。
Js代码
(function ($) {
$.extend($.fn, {
DtFilter: function (setting) {
var container = this.html('<span type="text" class="filterDiv"><i class="fa fa-filter"></i></span><div class="filterParamDiv"><a href="javascript:void(0);" class="day filterActive">日</a><a href="javascript:void(0);" class="week">周</a><a href="javascript:void(0);" class="month">月</a></div>');
container.find(".filterDiv,.filterParamDiv").mouseover(function () {
container.find(".filterParamDiv").show();
});
container.find(".filterDiv,.filterParamDiv").mouseout(function () {
container.find(".filterParamDiv").hide();
});
var ps = $.extend({
day: function () { },
week: function () { },
month: function () { }
}, setting);
var fil = {
day: function (e) {
ps.day(e);
container.find(".week").removeClass("filterActive");
container.find(".month").removeClass("filterActive");
container.find(".day").addClass("filterActive");
},
week: function (e) {
ps.week(e);
container.find(".week").addClass("filterActive");
container.find(".month").removeClass("filterActive");
container.find(".day").removeClass("filterActive");
},
month: function (e) {
ps.month(e);
container.find(".week").removeClass("filterActive");
container.find(".month").addClass("filterActive");
container.find(".day").removeClass("filterActive");
}
};
container.find('.day').bind('click', function (e) {
fil.day(e);
});
container.find('.week').bind('click', function (e) {
fil.week(e);
});
container.find('.month').bind('click', function (e) {
fil.month(e);
});
return container;
}
});
})(jQuery);
这里i标签fa fa-filter样式不是bootstrap里面的，如果有需要用的，可以修改成bootstrap里面的。
Css样式
.filtercontainer{
position:relative;
}
.filterDiv{
font-size:24px!important;
padding-left:5px;
padding-right:5px;
}
.filterDiv > i{
font-size:24px;
}
.filterParamDiv{
position:absolute;
left:-5px;
top:30px;
z-index:999!important;
border:1px solid #808080;
width:42px;
background:#808080;
opacity:0.7;
color:#fff;
height:122px;
display:none;
border-radius:5px;
}
.filterParamDiv > a{
display:block;
font-size:13px;
font-family:宋体;
width:30px;
height:30px;
text-align:center;
vertical-align:middle;
border:1px solid #fff;
border-radius:20px;
padding-top:5px;
color:#fff;
margin-left:5px;
margin-top:8px;
}
.filterActive{
color:#fff;
border:1px solid red!important;
background:red;
}
.filterParamDiv > a:visited{
color:#fff;
border:1px solid red;
background:red;
}
.filterParamDiv > a:hover{
color:#fff;
border:1px solid red;
background:red;
}
具体兼容性啥的我也不知道，我就在Chrome上面用的。
调用方法：
首先引用Js和Css，然后在Div上面添加Id="testfilter"
$("#testfilter").DtFilter({
day: function (e) {
//点击天
},
week: function (e) {
//点击周
},
month: function (e) {
//点击月
}
});
我是个做.NET后端的，前端不行，如果有问题，请指教，我也在学习中。