モバイルのような画面が小さいときにタブというのは使い勝手としてはどうなんだろう。。個人的にはそこまで気になりませんが、やはりタップ領域が小さいよりは大きいほうがとは思うところではあります。
『Responsive-Tabs』
デモはこちらから『Responsive-Tabs』demo
『Responsive-Tabs』の対応ブラウザ
- IE7+
- Firefox
- Safari
- Google Chrome
- Opera
『Responsive-Tabs』の使い方
jQuery 1.7.0以上と『Responsive-Tabs』と『responsive-tabs.css』を読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="responsiveTabsDemo"> <ul> <li><a href="#tab-1"> .... </a></li> <li><a href="#tab-2"> .... </a></li> <li><a href="#tab-3"> .... </a></li> </ul> <div id="tab-1"> ....... </div> <div id="tab-2"> ....... </div> <div id="tab-3"> ....... </div> </div> |
|
1 2 3 |
$('#responsiveTabsDemo').responsiveTabs({ startCollapsed: 'accordion' }); |
オプションの方も充実しています。
- Collapsible
- Start collapsed
- Disabled tabs
- Rotate
- Animation
動きも滑らかで使い勝手がとても良さそうなので覚えておきたい&役立つjQueryプラグインだと思います。
Pingback: Web制作で使えた！jQueryプラグインまとめ＋起業しました | コムテブログ()