成果物タグのついた記事一覧

2つのプルダウンから要素の絞込表示をするjQuery – boxfilter_double.js

Web

概要

incboxfilter_select.jsをさらに改造して、2つのプルダウンセレクターで要素の絞込表示をする。

成果物

  • https://hi3103.net/study/boxfilter_double/
  • https://hi3103.net/study/incboxfilter_double/
    • incファイルの場合
HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/boxfilter_double.js"></script>
    <title>boxfilter_double.js</title>
</head>
<body>

    <select name="filter_area" class="filters">
        <option value="area_all" selected="selected">Show All Area</option>
        <option value="area_1">Show Area_1</option>
        <option value="area_2">Show Area_2</option>
        <option value="area_3">Show Area_3</option>
        <option value="area_4">Show Area_4</option>
    </select>

    <select name="filter_genre" class="filters">
        <option value="genre_all" selected="selected">Show All Genre</option>
        <option value="genre_1">Show Genre_1</option>
        <option value="genre_2">Show Genre_2</option>
        <option value="genre_3">Show Genre_3</option>
    </select>

    <div class="boxes">
        <a class="area_1 genre_1 genre_2" href="#">Box1</a>
        <a class="area_2 genre_1 genre_3" href="#">Box2</a>
        <a class="area_3 genre_2 genre_3" href="#">Box3</a>
        <a class="area_4 genre_3" href="#">Box4</a>
        <a class="area_1 genre_1 genre_2 genre_3" href="#">Box5</a>
        <a class="area_2 genre_1 genre_2" href="#">Box6</a>
        <a class="area_3 genre_1 genre_3" href="#">Box7</a>
        <a class="area_4 genre_1 genre_2 genre_3" href="#">Box8</a>
        <a class="area_1 genre_1 genre_3" href="#">Box9</a>
        <a class="area_2 genre_1 genre_2 genre_3" href="#">Box10</a>
        <a class="area_3 genre_3" href="#">Box11</a>
        <a class="area_4 genre_1 genre_2 genre_3" href="#">Box12</a>
        <a class="area_1 genre_1 genre_2 genre_3" href="#">Box13</a>
        <a class="area_2 genre_1 genre_3" href="#">Box14</a>
        <a class="area_3 genre_1 genre_2" href="#">Box15</a>
        <a class="area_4 genre_1 genre_3" href="#">Box16</a>
        <a class="area_1 genre_3" href="#">Box17</a>
        <a class="area_2 genre_1 genre_2 genre_3" href="#">Box18</a>
        <a class="area_3 genre_1 genre_2 genre_3" href="#">Box19</a>
        <a class="area_4 genre_1 genre_2" href="#">Box20</a>
    </div>
</body>
</html>
boxfilter_double.js
$(document).ready(function(){

    var $boxes = $('.boxes a');

    $('select.filters').change(function () {
        $boxes.removeClass('match');

        $('select[name=filter_area] option:selected').each(function () {
            var $sa = $(this).attr('value');
            if($sa == 'area_all'){
                $boxes.addClass('match');
            }else if($boxes.hasClass($sa)){
                $boxes.filter('.'+$sa).addClass('match');
            }
        });
        $('select[name=filter_genre] option:selected').each(function () {
            var $sg = $(this).attr('value');
            if($sg != 'genre_all' && $boxes.hasClass('match')){
                $boxes.filter(':not(.'+$sg+')').removeClass('match');
            }
        });

        $boxes.fadeOut().promise().done(function() {
            $boxes.filter('.match').fadeIn();
        });
    });
});
style.CSS
@charset "UTF-8";

a {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    margin-bottom: 1em;
    margin-right: 1em;
}

.boxes a {
    width: 10em;
    color:#CCC;
}

.area_1{ border: 2px solid gold; }
.area_2{ border: 2px solid lightblue; }
.area_3{ border: 2px solid lightgreen; }
.area_4{ border: 2px solid pink; }

.match{
    background-color: #000;
    color: #FFF;
}

参考URL

incboxfilter_select.js

Web

概要

読み込んだincファイルの要素を絞込表示するjQuery – incboxfilter.jsをプルダウンセレクターにしたバージョン。
スタイルもシンプルにした。

成果物

http://hi3103.net/study/incboxfilter_select/

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/incboxfilter_select.js" charset="UTF-8"></script>
    <title>incboxfilter_select.js</title>
</head>
<body>

    <select name="filter">
        <option value="all" selected="selected">Show All</option>
        <option value="green">Show Green Boxes</option>
        <option value="blue">Show Blue Boxes</option>
        <option value="red">Show Red Boxes</option>
        <option value="hoge">Show Hoge Boxes</option>
    </select>

    <div class="boxes"></div>
</body>
</html>
incboxfilter_select.js
$(function(){
    $('.boxes').load('inc/box.inc', null, function() {
        var $filters = $('select[name=filter]');
        var $boxes = $('.boxes a');

        $filters.change(function () {
            $('select option:selected').each(function () {
                var $filterColor = $(this).attr('value');

                if ($filterColor == 'all') {
                    $boxes.fadeOut().promise().done(function() {
                        $boxes.fadeIn();
                    });
                } else {
                    $boxes.fadeOut().promise().done(function() {
                        $boxes.filter('.'+$filterColor).fadeIn();
                    });
                }
            });
        });
    });
});
box.inc
<a class="red" href="#">Box1</a>
<a class="green" href="#">Box2</a>
<a class="blue hoge" href="#">Box3</a>
<a class="green" href="#">Box4</a>
<a class="red" href="#">Box5</a>
<a class="green" href="#">Box6</a>
<a class="blue" href="#">Box7</a>
<a class="red hoge" href="#">Box8</a>
<a class="green" href="#">Box9</a>
<a class="blue" href="#">Box10</a>
<a class="red" href="#">Box11</a>
<a class="green hoge" href="#">Box12</a>
<a class="blue hoge" href="#">Box13</a>
<a class="green" href="#">Box14</a>
<a class="red" href="#">Box15</a>
<a class="blue" href="#">Box16</a>
style.css
@charset "UTF-8";

a {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    margin-bottom: 1em;
    margin-right: 1em;
}

.boxes a {
    width: 10em;
    color:#FFF;
}

.green{
    background: lightgreen;
}
.blue{
    background: lightblue;
}
.red{
    background: lightcoral;
}
.hoge{
    border: 2px solid #000;
}

参考URL

読み込んだincファイルの要素を絞込表示するjQuery – incboxfilter.js

Web

概要

  • 読み込んだincファイルの要素を付与されたクラス名を元に絞込表示する。

改造元

以下のエントリーを元に改造させていただきました。

成果物

http://hi3103.net/study/incboxfilter/

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/incboxfilter.js" charset="UTF-8"></script>
    <title>incboxfilter.js</title>
</head>
<body>

    <div class="filter">
        <a class="all active" data-filter="all" href="#" role="button">Show All</a>
        <a class="green" data-filter="green" href="#" role="button">Show Green Boxes</a>
        <a class="blue" data-filter="blue" href="#" role="button">Show Blue Boxes</a>
        <a class="red" data-filter="red" href="#" role="button">Show Red Boxes</a>
        <a class="hoge" data-filter="hoge" href="#" role="button">Show Hoge Boxes</a>
    </div>

    <div class="boxes"></div>
</body>
</html>
box.inc
<a class="red" href="#">Box1</a>
<a class="green" href="#">Box2</a>
<a class="blue hoge" href="#">Box3</a>
<a class="green" href="#">Box4</a>
<a class="red" href="#">Box5</a>
<a class="green" href="#">Box6</a>
<a class="blue" href="#">Box7</a>
<a class="red hoge" href="#">Box8</a>
<a class="green" href="#">Box9</a>
<a class="blue" href="#">Box10</a>
<a class="red" href="#">Box11</a>
<a class="green hoge" href="#">Box12</a>
<a class="blue hoge" href="#">Box13</a>
<a class="green" href="#">Box14</a>
<a class="red" href="#">Box15</a>
<a class="blue" href="#">Box16</a>
incboxfilter.js
$(function(){
    $(".boxes").load("inc/box.inc", null, function() {
        var $filters = $('.filter [data-filter]');
        var $boxes = $('.boxes a');

        $filters.on('click', function(e) {
            e.preventDefault();
            var $this = $(this);

            $filters.removeClass('active');
            $this.addClass('active');

            var $filterColor = $this.attr('data-filter');

            if ($filterColor == 'all') {
                $boxes.fadeOut().promise().done(function() {
                    $boxes.fadeIn();
                });
            } else {
                $boxes.fadeOut().promise().done(function() {
                    $boxes.filter('.'+$filterColor).fadeIn();
                });
            }
        });
    });
});
style.css
@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font:18px/3 Arial,sans-serif;
    text-align: center;
}
a{
    text-decoration: none;
    display: block;
    color: #333;
}

/* filter */
.filter{
    margin: 2em 30%;
}
.filter a{
    display: block;
    position: relative;
    margin-bottom: 1em;
}
.filter a.active:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 0;
    border-color: #333 transparent transparent transparent;
}

/* boxes*/
.boxes{
    display: flex;
    flex-wrap: wrap;
}
.boxes a{
    width: 23%;
    margin: 0 1% 1em 1%;
}
.all{
    background: lightgray;
}
.green{
    background: lightgreen;
}
.blue{
    background: lightblue;
}
.red{
    background: lightcoral;
}
.hoge{
    border: 1px solid #333;
}

参考URL