前の記事 ≪:タスクトレイをウィンドウ化「タスクメイド」v1.3.4
次の記事 ≫:prototype.jsベースのWYSIWYGエディタウィジェット「Control.TextArea」

ブラウザ上で動作する便利なウィジェットを簡単作成「iCarousel」

2007年05月14日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
iCarousel - An open source (free) javascript tool for creating carousel like widgets.
iCarousel is an open source (free) javascript tool for creating carousel like widgets.

ブラウザ上で動作する便利なウィジェットを簡単作成「iCarousel」。
次のようなアニメーションするウィジェットを作成可能。

ニューススクローラー


>水平画像スクローラー


>垂直テキストスクローラー


実装コードもシンプルで、垂直テキストスクローラーの場合は次のコードで実現できます。

■HTML / ■JavaScript

<h3>V. Vertical text scroller</h3>
<div id="example_5">
<div id="example_5_content">
<div class="example_5_item">
<h4>What is Lorem Ipsum?</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book...</p>
<p><a href="http://www.lipsum.com">more information</a></p>
</div>
<div class="example_5_item">
<h4>Where does it came from?</h4>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked...</p>
<p><a href="http://www.lipsum.com">more information</a></p>
</div>
<div class="example_5_item">
<h4>Why do we use it?</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',...</p>
<p><a href="http://www.lipsum.com">more information</a></p>
</div>
</div>
<div id="example_5_frame">
<img id="example_5_previous" src="images/ex4_previous.gif" alt="move previous" />
<img id="example_5_next" src="images/ex4_next.gif" alt="move next" />
</div>
</div>


<script>
window.addEvent("domready", function() {
 new iCarousel("example_5_content", {
  idPrevious: "example_5_previous",
  idNext: "example_5_next",
  idToggle: "undefined",
  item: {
   klass: "example_5_item",
   size: 172
  },
  animation: {
   direction: "top",
   duration: 1000,
   amount: 1
  }
 });
});
</script>

デフォルトだとちょっとかっこ悪い感じですが、スタイルシートでデザインされているのでCSSによってクールなUIにすればかなり使えそうですね。

関連の記事検索:JavaScript, widget, ウィジェット, UI, ライブラリ
スポンサード リンク

By.KJ : 2007年05月14日 07:01 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)