スライダーで操作できる年表作成 -jQuery-

ニュースサイトを見ていると年表形式で表示しているところがあり、ちょうど情報量が多く、操作性の良い"沿革"の表示を求められていたので参考にさせてもらうことにした。

この年表の下部には利用している"Timeglider"というモジュールの名前らしきロゴが表示されていた。

この"Timeglider"を検索すると説明とソースのダウンロードサイトが見つかった。
->Timeglider


インターフェイスはJavaScriptで実装されており、最近よく使われているJavaScriptのライブラリ"jQuery"を拡張されたものだ。

ダウンロードしたファイルにはJSファイルに加え、サンプルとなるHTMLファイルも同梱されており、それに手を加えるだけで簡単に編集することができる。

 Timegliderを利用した年表


HTMLファイルにはTABLEタグで記載された年表の情報があり、期間指定や表示するタイトル、マウスオーバー時の説明文やリンク先などを書き込むことができ、それがJavaScriptを介して年表形式で成形される。

呼び出さないといけないJSファイルは数が多いものの、年表を出すタグは簡単なのでサンプルをコピーすればすぐに実装できる。

ただ、表示する年数を多くするほど細かな数値位置が取れないため若干のズレが生じてくる。


"Timeglider"を始めとする年表インターフェイスの記事はいくつか紹介されていたが、どれもあまり活用シーンがないように書かれていた。

しかし、前述したとおり企業の沿革や自己紹介、特に職務経歴を見るには時系列に見れて便利に感じる。

CGIと応用すればスケジュール管理やプロジェクトの案件管理にも利用できそうだ。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 5

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた
ナイス

この記事へのコメント

この記事へのトラックバック