MixItUp

2022年6月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はフィルタリングプラグイン「MixItUp」について書きます。

参考：株式会社オンズ｜【jQuery】超高機能ギャラリー［MixItUp］の使い方。

参考：WPJ｜かっこよくて気持ちいい！ページ内の要素を整列・抽出する「MixItUp」がいい感じ

MixItUpとは

MixItUpは、要素を抽出したり並び替えたりできるjQueryのプラグインです。

うちのブログ一覧ページで使っています。

mix it upは「混ぜ合わせる」という意味です。
mix it up with～で「ケンカする」「殴り合う」
mix upで「混乱する」だそうです。

使い方

① MixItUpにアクセスしてmixitup.cssとmixitup.jsを入手

② mixitup.cssとmixitup.jsを読み込む

<link rel="stylesheet" href="css/mixitup.css">
                            
<script src="js/mixitup.js"></script>

③ jQueryの設定

$(function() {
  $('#Container').mixItUp();
});

④ CSSの設定

#Container .mix {
  display:none;
}

⑤ 要素を設置

<div id="Container" class="container">
                            
  <div class="mix category-1" data-myorder="1"></div>
  <div class="mix category-2" data-myorder="2"></div>
  <div class="mix category-3" data-myorder="3"></div>
  <div class="mix category-4" data-myorder="4"></div>
  <div class="mix category-1" data-myorder="5"></div>
  <div class="mix category-2" data-myorder="6"></div>
  <div class="mix category-3" data-myorder="7"></div>
  <div class="mix category-4" data-myorder="8"></div>
  <div class="mix category-1" data-myorder="9"></div>
  <div class="mix category-2" data-myorder="10"></div>
  <div class="mix category-3" data-myorder="11"></div>
  <div class="mix category-4" data-myorder="12"></div>
  
  <div class="gap"></div>
  <div class="gap"></div>

</div>

クラスにカテゴリー名を記述します。

data-myorderでそれぞれの要素に番号を割り振ります。

最後に空の要素（gap）を2つ設置するのがポイントらしいです。

フィルターボタンとソートボタン

<div class="controls">
                            
  <button class="filter" data-filter="all">すべて</button>
  <button class="filter" data-filter=".category-1">青</button>
  <button class="filter" data-filter=".category-2">赤</button>
  <button class="filter" data-filter=".category-3">緑</button>
  <button class="filter" data-filter=".category-4">黄</button>
                            
  <button class="sort" data-sort="myorder:asc">昇順</button>
  <button class="sort" data-sort="myorder:desc">降順</button>
  <button class="sort" data-sort="random">ランダム</button>
  
</div>

data-filterでフィルターボタン
data-sortでソートボタンができます。

ascはascending order（昇順）
descはdescending order（降順）の略だと思います。

各要素には<a>タグでリンクを設定することができますが、ソートするとリンク先がおかしくなってしまう謎のバグがあります（どれをクリックしても1番目のリンクに飛んでしまう）

なんでかなあ。うちが使ってるのがMixItUp2だから？（最新版はMixItUp3です）

最初からフィルターやソートを適用する

$(function() {
  $('#Container').mixItUp({
    load: {
      filter: ".category-1"
    }
  });
});

jQueryの部分にこのように記述すると、ページ読み込み時にフィルターが適用された状態になります。

ソートでも同様の設定ができます。

まとめ

複数のフィルターを同時に効かせる方法もあるようですが、説明のページを読んでも頭がmix upでまだ実装できていません。

例えば「2021年または2020年の」かつ「学会または論文の」記事を抽出、とかができるようになりたいです。

そしたらカテゴリ別と年別のページを分けなくてよくなるのですが。

ブログ一覧ページではBootstrapのcardを使っているのですが、記事タイトルが2行になるとcardの高さが揃わないという悩みがあります。なんでだろう。MixItUpの影響かなあ。