Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
15
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

こんなカード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日

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
15
Help us understand the problem. What are the problem?