LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

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

<<   作成日時 : 2011/07/01 18:21   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 3 / トラックバック 0 / コメント 1

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

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

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


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

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

 Timegliderを利用した年表


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

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

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


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

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

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

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 3
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(1件)

内 容 ニックネーム/日時
Thank you for the good writeup. It in fact was a amusement account it.
Look advanced to more added agreeable from you!

However, how can we communicate?
Cyril
URL
2017/07/24 13:39

コメントする help

ニックネーム
URL(任意)
本 文
スライダーで操作できる年表作成 -jQuery- LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる