Help us understand the problem. What is going on with this article?

JavaScript - カードUIフレームワーク的なものを作ってみた

More than 5 years have passed since last update.

こんなカードUIテンプレートが欲しかった

  • JavaScript製
  • レスポンシブデザインである
  • ウィンドウの表示領域の横幅に合わせてカードが自動でセンタリングされる
  • デザインの設定が簡単
  • カードの高さが表示するまでわからずバラバラでもキレイに並べられる
  • カードがクリックされたときの動作も設定できる
  • 主要モダンブラウザ互換性を保っている
  • PCでもスマホでもタブレットでもしっかり表示できる
  • Chrome Apps のUIでも使える
  • 最近ハマっているmonaca(HTML5モバイルアプリ開発プラットフォーム)で開発しているアプリのUIとしても使いたい

つくってみた - griddles.js

実際にJavaScriptで書いてみました。簡単な使い方もGitHubのページでまとめてあります。

できるようになったこと

  • 画面の横幅に応じてカードを綺麗に整列表示
  • 写真などの事前に縦幅がわからないカードの表示
  • カードがクリックされた時の挙動の設定
  • Chrome, Firefox, Safari, Opera, IE10 での表示
  • PC, スマートフォン, タブレット での表示
  • 自動でXMLHttpRequestでの画像の読み込み(Chromeアプリで使用)
  • 1回あたりのカード読み込みの制限 (詳細)
  • カードを表示するストリームの本数の上限値の設定 (詳細)
  • カードの幅を広くする指定 (詳細)
  • Mobile Chrome Apps に対応
  • カードを上から追加する機能 (詳細)
  • portrait設定とlandscape設定 (詳細)
  • サイド・ナビゲーション導入 (詳細)
  • フローティングカード機能 (詳細)

GriddlesJSを用いた自作アプリ

追記

 2014年8月2日

  • GriddlesJS(beta)の開発は現在も継続中です。今年の11月にはベータ版を卒業することを目指しています。ご試用頂いたご感想・バグのご報告・機能追加のご要望などお待ちしています!

 2014年9月11日

daiiz
趣味でchrome アプリ/拡張機能を作っています。 https://github.com/daiiz/ http://daiiz.hatenablog.com/
https://scrapbox.io/daiiz/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした