前の記事 ≪:2012年11月22日 管理人のブックマーク
次の記事 ≫:モバイルブラウザでの高速クリックを実現するjQueryプラグイン「jQuery F...

レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」

2012年11月26日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
FooTable | Themergency

レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」
レスポンシブなWEBデザインを作る際に一番やっかいなのではというのが、テーブルですね。
折り返しが出来ないのでどうやってレイアウトしようと悩むところですが、画面が小さい時は主要な物を選んで出す、といった事ができます
テーブルのth 要素で出す出さないの定義をすることができて、あとはプラグイン関数で初期化するだけというお手軽さです。

iPhone。主要な部分を見せつつ、折畳みで他の要素もみせるUI


ちょっと画面の大きなタブレットでの画面。表示要素は多くなるけどまだ折畳みで他の要素をみせる状態



PCの大きなディスプレイですべて開いた状態



次のように、data-class、data-hide の属性を付けておくことで挙動をカスタマイズ可能です



関連エントリ
関連の記事検索:レスポンシブ, プラグイン, テーブル, jQueryプラグイン
スポンサード リンク

By.KJ : 2012年11月26日 09:06 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)