グリッドレイアウト採用時に便利なjQueryプラグイン 20 - NxWorld
有名なサイトだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。 少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。 基本的な動きは同じようなものでもサポートブラウザやアニメーションの有無などがプラグインによって違うので、自分の中で幾つか使いやすいものを見つけておくと良いと思います。 一応グリッドレイアウトを実装するためのプラグインということでまとめていますが、中にはフィルタリング・ソート・ドラッグ&ドロップなどの機能も併せて実装できるプラグインもあります。 また、基本的にフリーで使用できるもの中心でまとめていますが、商用利用
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を使ったリスト操作 ソート 検索 フィルタ 追加 編集 削除 こ
Amazon | おとなセレクト
おとなセレクトSTYLE 南仏ヴァカンスの逸品 誰もが一度は聞いたことがある地名、カンヌ、ニース、プロヴァンス……南仏と総称されるフランス屈指のリゾート地には、自然を慈しみながら人生を豊かに愉しむ南仏流の生活術がある。いま食や美容の世界で盛んに言われる「オーガニック」も南仏では昔からあたりまえのように実践されていた考え方。そんな南仏の魅力を伝える物語と逸品の数々。 連載記事をチェック 編集協力 林 信朗 (はやし しんろう) 編集者。『ｍｃシスター』『メンズクラブ』『ヴァンサンカン』などの編集長を歴任しフリーに。グローバルな取材経験を土台にしたファッション、グルメ、旅のエッセイを小学館『メンズプレシャス』、日本航空『Skyward』などに寄稿中。伊勢志摩サミットの舞台、志摩観光ホテルのサービスシステムも構築。Amazon.co.jp『おとなセレクト』の企画・編集に協力している。
タッチデバイスにhoverっぽい機能を付与するスクリプト・「Hover on Touch」
Hover on TouchはiPhoneやAndroidのようなタッチデバイスにPCサイトのhoverっぽい機能を付与する為のスクリプトです。上図はフリックしているところですが、タッチしている部分に変化が出ているのが分かるかと思います。 左は背景の色が変わっています。右はPCサイトでもよく見かけますね。マウスを乗せたら情報が出てくる的なもの。タップのように指を離してからの動作ではなく、触れた時点でアクションを起こすのでPCサイトでのhoverっぽい挙動を表現する事が出来る、という目的で開発したそう。説明下手で申し訳ありません； PCのhoverと全く同様の機能ではありませんが、これはこれで良いアイデアじゃないかなと思います。 Hover on Touch
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>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リストやテーブルにフィルタリング機能やソート、検索機能を付与するスクリプト・「List.js」
タグによるフィルタリング機能を実装できるjQueryプラグイン
finefinefine.jp