Timeline APIで年表
Timelineライブラリにお世話になりました。【Ajax】時間ベースな情報のためのTimeline APIで紹介されております。
データを渡すためにXMLを外部ファイルで用意するという仕様なんです。恐らくは機能満載なのですがDocsが少ない(なおかつ英語。。)なので色々指向錯誤したのでメモです。
範囲指定
eventタグの属性にstartとendを指定すると範囲指定になります。
<event title="イベント" start="192" end="202">本文</event>
endを指定しないとアイコン＋タイトルが出るのみでバーが出ません。
<event title="イベント" start="192">本文</event>
でなおかつisDurationに"true"を指定するとアイコンが出ずに白抜きで文字が表示されます。
<event title="イベント" start="192" end="202" isDuration="true">本文</event>
アイコン指定
eventタグのicon属性にURLを指定するとカスタマイズしたアイコンが表示されます。
<event title="イベント" start="192" icon="http://image.my3594.net/img/timeline/battle.gif">本文</event>
CSSが衝突した
で、ﾃﾞｹﾀ！と思っていざリリースしようとしたらIEでdivの描画がクチョクチョになってしまいました。
(ある期間スクロールすると一部レイヤーが消え去ってしまいました。)
どうも既存にあるCSSが悪さをしているらしい。。。。
あれこれやってみたんですがうまく行かず結局iframeで切って表示させる事にしました。orz。。
