hifiveのUIライブラリ紹介「カルーセル」
hifiveはHTML5アプリケーション用のフレームワークですが、業務要件でありがちな各種UIについてもライブラリを提供しています。
今回はその中からカルーセルについて紹介します。
実際の動きを紹介します。
使い方ですが、まずHTMLは次のように定義します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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が次のようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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はこれだけです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| h5.core.controller('.carousel-wrapper', h5.ui.components.carousel.CarouselController); | |
| }); |
これで .carousel-wrapper に対してカルーセルが適用されます。
カルーセルはマウスやタップ操作でドラッグできます。複数の類似項目から選択してもらう場合などのUIに使えるのではないでしょうか。ぜひお試しください。
hifive – HTML5企業Webシステムのための開発プラットフォーム
hifive開発者ブログ 
コメントは受け付けていません。