こんなカードUIテンプレートが欲しかった
- JavaScript製
- レスポンシブデザインである
- ウィンドウの表示領域の横幅に合わせてカードが自動でセンタリングされる
- デザインの設定が簡単
- カードの高さが表示するまでわからずバラバラでもキレイに並べられる
- カードがクリックされたときの動作も設定できる
- 主要モダンブラウザ互換性を保っている
- PCでもスマホでもタブレットでもしっかり表示できる
- Chrome Apps のUIでも使える
- 最近ハマっているmonaca（HTML5モバイルアプリ開発プラットフォーム）で開発しているアプリのUIとしても使いたい
つくってみた - griddles.js
実際にJavaScriptで書いてみました。簡単な使い方もGitHubのページでまとめてあります。
- ソースコード: View on GitHub
- デモページ: デモ1, デモ2(最新)
できるようになったこと
- 画面の横幅に応じてカードを綺麗に整列表示
- 写真などの事前に縦幅がわからないカードの表示
- カードがクリックされた時の挙動の設定
- Chrome, Firefox, Safari, Opera, IE10 での表示
- PC, スマートフォン, タブレット での表示
- 自動でXMLHttpRequestでの画像の読み込み（Chromeアプリで使用）
- 1回あたりのカード読み込みの制限 (詳細)
- カードを表示するストリームの本数の上限値の設定 (詳細)
- カードの幅を広くする指定 (詳細)
- Mobile Chrome Apps に対応
- カードを上から追加する機能 (詳細)
- portrait設定とlandscape設定 (詳細)
- サイド・ナビゲーション導入 (詳細)
- フローティングカード機能 (詳細)
GriddlesJSを用いた自作アプリ
追記
- Playground: Griddles Playground
2014年8月2日
- GriddlesJS(beta)の開発は現在も継続中です。今年の11月にはベータ版を卒業することを目指しています。ご試用頂いたご感想・バグのご報告・機能追加のご要望などお待ちしています！
- リリースノート（開発ブログ）：http://daiiz.hatenablog.com/archive/category/griddles
2014年9月11日
- 最新版を公開しました。
- リリースノート（開発ブログ）：http://daiiz.hatenablog.com/entry/2014/09/11/221828