{"id":1036,"date":"2017-01-31T00:00:00","date_gmt":"2017-01-30T15:00:00","guid":{"rendered":"https:\/\/hi3103.net\/notes\/?p=1036"},"modified":"2022-07-09T23:33:44","modified_gmt":"2022-07-09T14:33:44","slug":"%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a0inc%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%81%ae%e8%a6%81%e7%b4%a0%e3%82%92%e7%b5%9e%e8%be%bc%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8bjquery-incboxfilter-js","status":"publish","type":"post","link":"https:\/\/hi3103.net\/notes\/web\/1036","title":{"rendered":"\u8aad\u307f\u8fbc\u3093\u3060inc\u30d5\u30a1\u30a4\u30eb\u306e\u8981\u7d20\u3092\u7d5e\u8fbc\u8868\u793a\u3059\u308bjQuery &#8211; incboxfilter.js"},"content":{"rendered":"<h4>\u6982\u8981<\/h4>\n<ul>\n<li>\u8aad\u307f\u8fbc\u3093\u3060inc\u30d5\u30a1\u30a4\u30eb\u306e\u8981\u7d20\u3092\u4ed8\u4e0e\u3055\u308c\u305f\u30af\u30e9\u30b9\u540d\u3092\u5143\u306b\u7d5e\u8fbc\u8868\u793a\u3059\u308b\u3002<\/li>\n<\/ul>\n<h4>\u6539\u9020\u5143<\/h4>\n<p>\u4ee5\u4e0b\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u5143\u306b\u6539\u9020\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/www.webprofessional.jp\/building-a-filtering-component-with-css-animations-jquery\/\">CSS3\u3068jQuery\u3092\u4f7f\u3063\u305f\u8981\u7d20\u306e\u7d5e\u308a\u8fbc\u307f\uff08\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\uff09\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5\u30b5\u30f3\u30d7\u30eb<\/a><\/li>\n<\/ul>\n<h4>\u6210\u679c\u7269<\/h4>\n<p>http:\/\/hi3103.net\/study\/incboxfilter\/<\/p>\n<h5>HTML<\/h5>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"&gt;\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n    &lt;script src=\"js\/incboxfilter.js\" charset=\"UTF-8\"&gt;&lt;\/script&gt;\n    &lt;title&gt;incboxfilter.js&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n    &lt;div class=\"filter\"&gt;\n        &lt;a class=\"all active\" data-filter=\"all\" href=\"#\" role=\"button\"&gt;Show All&lt;\/a&gt;\n        &lt;a class=\"green\" data-filter=\"green\" href=\"#\" role=\"button\"&gt;Show Green Boxes&lt;\/a&gt;\n        &lt;a class=\"blue\" data-filter=\"blue\" href=\"#\" role=\"button\"&gt;Show Blue Boxes&lt;\/a&gt;\n        &lt;a class=\"red\" data-filter=\"red\" href=\"#\" role=\"button\"&gt;Show Red Boxes&lt;\/a&gt;\n        &lt;a class=\"hoge\" data-filter=\"hoge\" href=\"#\" role=\"button\"&gt;Show Hoge Boxes&lt;\/a&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"boxes\"&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<h5>box.inc<\/h5>\n<pre><code class=\"language-html\">&lt;a class=\"red\" href=\"#\"&gt;Box1&lt;\/a&gt;\n&lt;a class=\"green\" href=\"#\"&gt;Box2&lt;\/a&gt;\n&lt;a class=\"blue hoge\" href=\"#\"&gt;Box3&lt;\/a&gt;\n&lt;a class=\"green\" href=\"#\"&gt;Box4&lt;\/a&gt;\n&lt;a class=\"red\" href=\"#\"&gt;Box5&lt;\/a&gt;\n&lt;a class=\"green\" href=\"#\"&gt;Box6&lt;\/a&gt;\n&lt;a class=\"blue\" href=\"#\"&gt;Box7&lt;\/a&gt;\n&lt;a class=\"red hoge\" href=\"#\"&gt;Box8&lt;\/a&gt;\n&lt;a class=\"green\" href=\"#\"&gt;Box9&lt;\/a&gt;\n&lt;a class=\"blue\" href=\"#\"&gt;Box10&lt;\/a&gt;\n&lt;a class=\"red\" href=\"#\"&gt;Box11&lt;\/a&gt;\n&lt;a class=\"green hoge\" href=\"#\"&gt;Box12&lt;\/a&gt;\n&lt;a class=\"blue hoge\" href=\"#\"&gt;Box13&lt;\/a&gt;\n&lt;a class=\"green\" href=\"#\"&gt;Box14&lt;\/a&gt;\n&lt;a class=\"red\" href=\"#\"&gt;Box15&lt;\/a&gt;\n&lt;a class=\"blue\" href=\"#\"&gt;Box16&lt;\/a&gt;<\/code><\/pre>\n<h5>incboxfilter.js<\/h5>\n<pre><code class=\"language-javascript\">$(function(){\n    $(\".boxes\").load(\"inc\/box.inc\", null, function() {\n        var $filters = $('.filter [data-filter]');\n        var $boxes = $('.boxes a');\n\n        $filters.on('click', function(e) {\n            e.preventDefault();\n            var $this = $(this);\n\n            $filters.removeClass('active');\n            $this.addClass('active');\n\n            var $filterColor = $this.attr('data-filter');\n\n            if ($filterColor == 'all') {\n                $boxes.fadeOut().promise().done(function() {\n                    $boxes.fadeIn();\n                });\n            } else {\n                $boxes.fadeOut().promise().done(function() {\n                    $boxes.filter('.'+$filterColor).fadeIn();\n                });\n            }\n        });\n    });\n});<\/code><\/pre>\n<h5>style.css<\/h5>\n<pre><code class=\"language-css\">@charset \"UTF-8\";\n\n*{\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nhtml{\n    font:18px\/3 Arial,sans-serif;\n    text-align: center;\n}\na{\n    text-decoration: none;\n    display: block;\n    color: #333;\n}\n\n\/* filter *\/\n.filter{\n    margin: 2em 30%;\n}\n.filter a{\n    display: block;\n    position: relative;\n    margin-bottom: 1em;\n}\n.filter a.active:before{\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 15px 15px 0 0;\n    border-color: #333 transparent transparent transparent;\n}\n\n\/* boxes*\/\n.boxes{\n    display: flex;\n    flex-wrap: wrap;\n}\n.boxes a{\n    width: 23%;\n    margin: 0 1% 1em 1%;\n}\n.all{\n    background: lightgray;\n}\n.green{\n    background: lightgreen;\n}\n.blue{\n    background: lightblue;\n}\n.red{\n    background: lightcoral;\n}\n.hoge{\n    border: 1px solid #333;\n}<\/code><\/pre>\n<h4>\u53c2\u8003URL<\/h4>\n<ul>\n<li><a href=\"http:\/\/detail.chiebukuro.yahoo.co.jp\/qa\/question_detail\/q1136561436\">JQuery\u3067Load\u3067\u8aad\u307f\u8fbc\u3093\u3060\u5f8c\u306eHTML\u306b\u5bfe\u3057\u3001DOM\u64cd\u4f5c\u304c\u3067\u304d\u305a\u306b\u56f0\u3063\u3066\u3044\u307e\u3059&#8230; &#8211; Yahoo!\u77e5\u6075\u888b<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u6982\u8981 \u8aad\u307f\u8fbc\u3093\u3060inc\u30d5\u30a1\u30a4\u30eb\u306e\u8981\u7d20\u3092\u4ed8\u4e0e\u3055\u308c\u305f\u30af\u30e9\u30b9\u540d\u3092\u5143\u306b\u7d5e\u8fbc\u8868\u793a\u3059\u308b\u3002 \u6539\u9020\u5143 \u4ee5\u4e0b\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u5143\u306b\u6539\u9020\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u3002 CSS3\u3068jQuery\u3092\u4f7f\u3063\u305f\u8981\u7d20\u306e\u7d5e\u308a\u8fbc\u307f\uff08\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\uff09\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5\u30b5 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[45,44,46],"class_list":["post-1036","post","type-post","status-publish","format-standard","hentry","category-web","tag-javascript","tag-jquery","tag-product"],"_links":{"self":[{"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/posts\/1036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/comments?post=1036"}],"version-history":[{"count":0,"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/posts\/1036\/revisions"}],"wp:attachment":[{"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/media?parent=1036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/categories?post=1036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hi3103.net\/notes\/wp-json\/wp\/v2\/tags?post=1036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}