jquery.filterizr.js 数据筛选js插件-BFW插件库

jquery.filterizr.js 数据筛选js插件
第一步引入bfwone
第二步执行插件代码
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.filterizr"], function() {
                $('.jq22').filterizr({
                    callbacks: {
                        onFilteringStart: function() {
                            console.log('开始');
                        },
                        onFilteringEnd: function() {
                            console.log('结束');
                        }
                    }
                });

                $('.nav li').on('click', function() {
                    $(this).toggleClass('active').siblings().removeClass('active');
                });
            });
        });
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
        }
        .nav {
            width: 1000px;
            margin: 0 auto 20px;
            text-align: center;
            font-size: 0;
        }
        .nav li {
            display: inline-block;
            margin: 0 5px;
            padding: 10px 20px;
            font-size: 14px;
            color: #333;
            background-color: #ccc;
            cursor: pointer;
        }
        .nav .active {
            color: #fff;
            background-color: #21b384;
        }
        .jq22 {
            width: 100%;
            margin: 0 auto;
            font-size: 0;
        }
        .filtr-item {
            display: inline-block;
            width: 230px;
            padding: 10px;
        }
        .filtr-item img {
            width: 100%;
        }
        body {
            margin: 0 auto;
           
        }

        h1 {
            margin: 40px auto;
            font: 32px "Microsoft Yahei";
            text-align: center;
        }

        .menu {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 200px;
            padding-top: 100px;
            font-family: Consolas,arial,"宋体";
            background-color: #ccc;
            overflow-y: auto;
        }
        .menu a {
            display: block;
            height: 40px;
            margin: 0 0 1px 2px;
            padding-left: 10px;
            line-height: 40px;
            font-size: 14px;
            color: #333;
            text-decoration: none;
        }
        .menu a:hover {
            background-color: #eee;
        }
        .menu .cur {
            color: #000;
            background-color: #fff !important;
        }

        .vad {
            margin: 50px 0 10px;
            font-family: Consolas,arial,宋体,sans-serif;
            text-align: center;
        }
        .vad a {
            display: inline-block;
            height: 36px;
            line-height: 36px;
            margin: 0 5px;
            padding: 0 50px;
            font-size: 14px;
            text-align: center;
            color: #eee;
            text-decoration: none;
            background-color: #222;
        }
        .vad a:hover {
            color: #fff;
            background-color: #000;
        }
        .thead {
            width: 728px;
            height: 90px;
            margin: 0 auto;
            border-bottom: 40px solid transparent;
        }

        .code {
            position: relative;
            margin-top: 100px;
            padding-top: 41px;
        }
        .code h3 {
            position: absolute;
            top: 0;
            z-index: 10;
            width: 100px;
            height: 40px;
            font: 16px/40px "Microsoft Yahei";
            text-align: center;
            cursor: pointer;
        }
        .code .cur {
            border: 1px solid #f0f0f0;
            border-bottom: 1px solid #f8f8f8;
            background-color: #f8f8f8;
        }
        .code .h31 {
            left: 0;
        }
        .code .h32 {
            left: 102px;
        }
        .code .h33 {
            left: 204px;
        }
        .code .h34 {
            left: 306px;
        }
        .code ol {
            padding: 0;
        }
        .code {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        pre {
            padding: 15px 0;
            border: 1px solid #f0f0f0;
            background-color: #f8f8f8;
        }
        .f-dn {
            display: none;
        }
    </style>
</head>
<body>

    <h1>数据筛选</h1>
    <ul class="nav">
        <li class="active" data-filter="all">全部</li>
        <li data-filter="1">城市</li>
        <li data-filter="2">自然</li>
        <li data-filter="3">工业</li>
        <li data-filter="4">白昼</li>
        <li data-filter="5">夜景</li>
    </ul>
    <div class="jq22">
        <div class="filtr-item" data-category="1, 5">
            <img src="http://repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
        </div>
        <div class="filtr-item" data-category="2, 5">
            <img src="http://repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
        </div>
        <div class="filtr-item" data-category="1, 4">
            <img src="http://repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
        </div>
        <div class="filtr-item" data-category="3">
            <img src="http://repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
        </div>
        <div class="filtr-item" data-category="3, 4">
            <img src="http://repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
        </div>
        <div class="filtr-item" data-category="2, 4">
            <img src="http://repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
        </div>
        <div class="filtr-item" data-category="1, 5">
            <img src="http://repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
        </div>
        <div class="filtr-item" data-category="2, 4">
            <img src="http://repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
        </div>
        <div class="filtr-item abc" data-category="3">
            <img src="http://repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
        </div>
    </div>
</body>
</html>
</body>
</html>
jquery.filterizr.js 数据筛选js插件

网友评论0

jquery.filterizr.js
