自己写的一个Js小插件

Posted 2020-08-14

这是效果图。上面一个过滤标签。下面弹出框，选择日，周，月。我的用途主要是报表查询的时候根据这３种类型来查询数据用的。

 

这里分享下代码。

 

---

 

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后端的，前端不行，如果有问题，请指教，我也在学习中。