hifiveのUIライブラリ紹介「カルーセル」
hifiveはHTML5アプリケーション用のフレームワークですが、業務要件でありがちな各種UIについてもライブラリを提供しています。
今回はその中からカルーセルについて紹介します。
実際の動きを紹介します。
使い方ですが、まずHTMLは次のように定義します。
| <div class="carousel-wrapper"> | |
| <div class="item red"> | |
| <p>アイテム1</p> | |
| </div> | |
| <div class="item blue"> | |
| <p>アイテム2</p> | |
| </div> | |
| <div class="item green"> | |
| <p>アイテム3</p> | |
| </div> | |
| <div class="item yellow"> | |
| <p>アイテム4</p> | |
| </div> | |
| <div class="item purple"> | |
| <p>アイテム5</p> | |
| </div> | |
| <div class="item gray"> | |
| <p>アイテム6</p> | |
| </div> | |
| </div> |
さらにCSSが次のようになります。
| ul.carousel>li { | |
| display: block; | |
| } | |
| .carousel-wrapper { | |
| width: 800px; | |
| height: 200px; | |
| margin: 20px 0 20px 0; | |
| padding: 5px; | |
| text-align: center; | |
| vertical-align: center; | |
| cursor: pointer; | |
| } | |
| .carousel-wrapper .item { | |
| width: 120px; | |
| height: 160px; | |
| line-height: 160px; | |
| } | |
| .red { | |
| background-color: #F3C0AB; | |
| } | |
| : // 他の色は省略 |
最後にJavaScriptはこれだけです。
| $(function() { | |
| h5.core.controller('.carousel-wrapper', h5.ui.components.carousel.CarouselController); | |
| }); |
これで .carousel-wrapper に対してカルーセルが適用されます。
カルーセルはマウスやタップ操作でドラッグできます。複数の類似項目から選択してもらう場合などのUIに使えるのではないでしょうか。ぜひお試しください。
hifive – HTML5企業Webシステムのための開発プラットフォーム
コメントは受け付けていません。