UI is new entry.

多数のリストを効果的に表示するUI（たたき上げVer）

サイト内で多数の項目をリスト表示したい時に使えそうなUIを考えた。

このUIは実際に使う予定。

今回は考え方だけメモっということで。

０、事前事項

まず、リストの項目は20個程度あって、それぞれ4つのカテゴリに分けられてます。

それをいかに効果的に見栄えを損なわず表示できるかが、今回のUIの課題です。

１、通常時

まず、上の画像は通常時のもの。

通常の状態ではoverflow:hidden;がかけられ、スクロールバーは表示されていません。

カテゴリでソートされていないので、全ての項目が表示されています。

ソートはphpなどで処理するのではなく、事前に全て読み込み、クラス名でカテゴリごとに名前をつけておきます。

そのクラス名をもとにjavascriptで表示／非表示を切り替えると言うわけです。

This is a Flickr badge showing public photos and videos from ryuichi@d-remix. Make your own badge here.