Masonryより高機能！フィルタ、ソート、レスポンシブ対応のグリッドレイアウト「Muuri.js」
タイル状に可変グリッドレイアウトを簡単に実装できる、今や定番のjqueryプラグインといえば「Masonry」。 しかし、このMasonryには配置したアイテムを指定したタグを持つもののみ表示するフィルター機能や、目的別に並べ替えるソート機能がありません。 「Masonry」プラグインのこれらの弱点を補ってくれる代替のプラグインとして有名なのが、「isotope」というjQueryプラグインがありますが、こちらは商用利用の場合はライセンス料の支払いが必要となってしまいます。 そこで今回紹介するのは、フィルター機能もソート機能も搭載した可変グリッドレイアウトを実現し、レスポンシブにも対応した、無料で商用利用も可能なJavascriptプラグイン「Muuri」(GitHubはこちら)。 MITライセンスで、IE9〜をサポートしています。 なお、Masonryは単体で利用可能で圧縮された状態のフ
HTMLをレスポンシブなグリッド上でソート、フィルタリングする「Shuffle.js」 - Tecuration .com
「Shuffle.js」はHTMLエレメントをレスポンシブが取り込まれたグリッド上でソート、フィルタリングを実現するjQueryプラグインです。 Shuffle.js 今作っていたWebサービスに取り入れたかったのでエントリー。異なるサイズのエレメントを含んでいてもグリッドレイアウトでソーティングしてくれます。またカテゴリによるフィルタリングも可能です。アニメーションもスムーズで良い感じ。 まずはこの状態から作成日付順にソートしてみます。 画像だけ見ても変わっているところしかわかりませんが、アニメーションがかっこいいです。 このようにフィルタリングも可能です。”Graphic Design”でフィルタリングしてみました。 それでは「Shuffle.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。 <script src="//cdnjs.cloudflar
【JavaScript】リストやテーブルにフィルタリングや検索機能を追加できる［List.js］が超絶便利です。
【JavaScript】リストやテーブルにフィルタリングや検索機能を追加できる［List.js］が超絶便利です。 先月、3月2日にリリースされた JavaScript プラグイン［List.js］を試用しました。 クオリティも高く、凄く便利ですね。 使いドコロの多いJavaScriptだと思うので、今日は本プラグインの具体的な導入方法を紹介していきます。 ［List.js］をダウンロードする まずは必要なファイルをダウンロードします。 下記公式サイトより『Download』をクリックした先のページから入手可能です。 List.js : http://www.listjs.com/ 手に入れたJavaScriptファイルはHTMLの任意の箇所で読み込みます。 <script src="list.min.js"></script> 実はCDNでも同スクリプトが配信されています。 わざわざダウン
List.jsの使い方 - clash_m45の開発ブログ
List.jsなるJavascriptライブラリがスゴイ！みたいな記事を見て、ちょっと感動し使ってみることにした。 しかし公式の説明を読んでもピンと来ない。 なぜなら私はhtmlやcssを書くことはできるが、しっかり理解できていなかったからだった。 そんな私がいきなりJqueryを使ったList.jsなど頭に入ってくるわけがない。 ということで、取り敢えず「Javascript 入門」と「Jquery」と「CSS 入門」をググり、なんとなく掴んでから再度List.jsへ挑んだ。 JavascriptやCSS、JqueryについてはSlideShareなどでまとめている人がいて、かなり理解しやすかった。 ここでは、そんな入門者がList.jsについて理解できるようにList.jsの使い方を書いていく。 今回紹介するList.jsを使ったリスト操作 ソート 検索 フィルタ 追加 編集 削除 こ
Masonry.jsでフィルターを実装する - Jumpei Sato
「Masonry.js」にはフィルター機能が付いていません。 個人使用なら問題ないのですが、商用でフィルターを使いたいとなると他の有料プラグインか、自分で実装するしかありません。 ここでは自分で実装する方法を紹介します。デモは下記です。 デモ DEMO ソース 主要な部分だけ抜粋しています。 <body class="category-all"> <main> <!-- ボタン --> <ul class="category-btn"> <li><a href="" class="all is-current">All</a></li> <li><a href="" class="sea">Sea</a></li> <li><a href="" class="mountain">Mountain</a></li> <li><a href="" class="river">River</a>
shuffle.jsで複数条件の絞り込み - Qiita
グリッド上でソートや絞り込みができるshuffle.jsを使って複数条件の絞り込みをします。 複数の項目を持つものを、1つの条件で絞り込む <ul class="type"> <li data-group="t1">果物</li> <li data-group="t2">野菜</li> </ul> <div id="container"> <div class="box" data-groups='["t2"]'>トマト</div> <div class="box" data-groups='["t2"]'>キャベツ</div> <div class="box" data-groups='["t1"]'>いちご</div> <div class="box" data-groups='["t1","t2"]'>スイカ</div> </div>
要素をアニメーションで絞り込みや並び替えさせるjQueryプラグイン Shuffle.js | N-LOG
Demoを見る HTML <ul id="btn"> <li data-group="all" class="active alpha">ALL</li> <li data-group="red" class="alpha">RED</li> <li data-group="blue" class="alpha">BLUE</li> <li data-group="green" class="alpha">GREEN</li> <li data-group="yellow" class="alpha">YELLOW</li> </ul> <ul id="animationList"> <li data-groups='["red"]'><span class="red">RED</span></li> <li data-groups='["yellow"]'><span class="ye
MixItUp,suffle.js｜ソート、フィルタリングを行うjQueryプラグイン – wald-grun.biz
<!-- FILTER CONTROLS --> <div class="controls"> <h3>Filter Controls</h3> <ul> <li class="filter" data-filter="all">Show All</li> <li class="filter" data-filter="category_1">Category 1</li> <li class="filter" data-filter="category_2">Category 2</li> <li class="filter" data-filter="category_3">Category 3</li> <li class="filter" data-filter="category_3 category_1">Category 1 & 3</li> </ul> </div> <!-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[jQuery]id順に要素を並び替える
リストやテーブルにフィルタリング機能やソート、検索機能を付与するスクリプト・「List.js」
タグによるフィルタリング機能を実装できるjQueryプラグイン
finefinefine.jp