タイムライン作成javascript「Timeline」

年表などを作成するとき時系列で並べると便利ですが、長くなりすぎるとページに収まりません。
そこでTimelineを使用すると、ある一部分のみを表示することができます。

使用方法
Timelineからtimeline.jsをmootoolsからmootools（v1.2）をダウンロードします。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/timeline.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/timeline.css" style="text/css">
＊CSSの中で画像をしてしていますので、適宜変更してください。
18.png、scale.gif
最後にタイムラインを表示する場所に以下を記述します。
<script type="text/javascript">
var timeline;
window.addEvent('domready', function(){
timeline = new TimeLine('timeline');
});
</script>
<div id="timeline"></div>
またタイムラインに表示するにはtimeline.jsの88行目以下を変更します。
this.addTimeEvent('タイトル' , '内容' ,X ,Y );
＊まだ開発途中なのかラベルなどをつけられません。
タイムライン作成javascript「Timeline」サンプル

2007年12月22日

前の記事：パノラマ写真を3Dで縮小表示するjavascript「3D Panorama」
次の記事：Appleライクなサイトを作るためのJavaScript 19+1

関連記事

• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• [mootools]mooVRotatingMenu
• 画面遷移せずにブックマークできるウィジェット「mooSocialize」
• [mootools]AJAX image crop

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」