タグ: JavaScript

50の美しくてユーザーフレンドリーなナビゲーションメニュー選

http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/

相変わらず、SMASHING MAGAZINEはネタが豊富。

CSSやJSを利用したナビゲーションの面白いアイデアが掲載されています。
どれも個性的で、デザインだけでなく動作も洗練されているので、応用しだいで素敵なナビゲーションデザインができそう。

ten

ph

nopoko

パンくずリスト実装色々

http://www.tomcoote.co.uk/JavaScriptCookieCrumbs.aspx

http://coliss.com/articles/build-websites/operation/javascript/693.htmlで紹介されていた)

ユーザーが辿ってきたページの経路履歴をクッキーに保存して、その経路をパンくずリストとして書き出すタイプ

http://www.mtblue.org/pc/web/breadcrumbs.php

ディレクトリの構造を取得して、上の階層へ辿るリンクをパンくずリストとして書き出すタイプ

 

色々ありますな。

「Sigma Grid」-表組みのソートもページネーションもカバーすしてくれるオープンソース (JSON使用)

http://www.sigmawidgets.com/products/sigma_grid2/index.html

Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェア。(データの表示に際してJSONでデータを渡す必要がある。)

参考サイト:http://www.moongift.jp/2008/11/sigma_grid/

まずカラムごとにソートができる。これは小数点や桁数をきちんと解釈した上でソートされる。セル内のデータを編集することはもちろん、ライブでバリデーションも行われる。編集されたカラムは色分けされて表示される。

テーブルについては大きさを変えることができる。さらにカラムの幅を変えることができ、長い文章の場合は「…」で省略してくれる。ページネーションにも対応し、簡易グラフ表示や印刷機能もある。

まだまだある。セルに画像やリンクを付けることができ、それはヘッダにも使える。ヘッダはグルーピングして多段にでき、ヘッダの下にテキストボックスやドロップダウンを配置(一括更新用!)もできる。フィルタリングを使ってテーブルデータを絞り込む機能があり、テキストのみならず数字に対しては以上以下といった条件指定ができる。

まだまだまだある。カラムはドラッグで移動させることができる。スキンに対応し、Vista風や中華風といったテーマが付属している。セル間における計算結果を表示する、イベント処理を感知する、メニューをつける、マウスオーバーでハイライトする、行の追加や削除処理にも対応するなどなど…とにかく多機能すぎて書ききれないほどだ。ああ、そうそう。左側のカラムを固定表示にすることもできるのだった。IDや会社名を固定に、横に長いデータをみる場合に絶賛の機能だ。