自己写的一个Js小插件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自己写的一个Js小插件相关的知识,希望对你有一定的参考价值。

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

技术分享

 

这里分享下代码。

 


 

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

 

以上是关于自己写的一个Js小插件的主要内容,如果未能解决你的问题,请参考以下文章

自己写的简单的FullPage插件

vue引入自己写的js,共用js或者引入第三方插件

angularjs自定义指令实现分页插件

类似于百度搜索 和新浪微博秀 那样js插件写法,那个是怎么写的

牛掰,在IDEA中,你可以安装小傅哥写的插件了

VIM 代码片段插件 ultisnips 使用教程