【jQuery】jQuery UIのtabsだけで よくあるスライドショーを作る
Category JavaScript
2012/01/04
概要
jQuery UI を読み込んでいるなら、タブで、ちょっとした「自動でローテーションするスライドショー」なんてすぐできちゃうよ！
詳細
以下、手順。
※ 広告などを表示するためのスライドショーを作ろうとしたときのメモなので、IDがadsなどになってます。適宜変更してください。
１、HTML外枠
こんな感じで、jquery.js、jquery-ui.js、jquery-ui.cssのcssを読み込むようにする。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery UI の tabs で スライドショー</title> <link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> </head> <body> ここにスライドショーのHTMLを追加します。 </body> </html>
２、スライドショーする部分のHTMLを作る
jquery.ui.tabsを使うので、これだけでOK。
<div id="ads"> <ul> <li><a href="#ad-panels-1">1</a></li> <li><a href="#ad-panels-2">2</a></li> <li><a href="#ad-panels-3">3</a></li> <li><a href="#ad-panels-4">4</a></li> </ul> <div id="ad-panels-1"><p><img src="タブ１の画像"></p></div> <div id="ad-panels-2"><p><img src="タブ２の画像"></p></div> <div id="ad-panels-3"><p><img src="タブ３の画像"></p></div> <div id="ad-panels-4"><p><img src="タブ４の画像"></p></div> </div>
３、スライドショーさせる（タブをローテーションさせる）
jquery.ui.tabsをローテーションさせるにはこのように書く。
引数の意味は、「”rotate”してね、時間間隔は1000ミリ秒で、クリックしたらローテーション止めてね」
<script type="text/javascript">
$(function() {
$('#ads').tabs().tabs("rotate", 1000, false);
});
</script>
４、スライドショーの見た目をカスタマイズする
jQuery UI のCSSが効いているが、タブを非表示にするときに .ui-tabs-hide というクラスを使っているなど、タブの表示/非表示もそのCSSに依存しているので、なるべく jQuery UI にのっかるようにする。
jquery.ui.tabs.css が以下のようになっている。
.ui-tabs { position: relative; padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
以下のようなCSSとスクリプトで、jQuery UIのCSSを上書きする。セレクタは「.クラス .クラス …」より「#ID …」の方が優先度が高いので、上書きしやすい。
<script type="text/javascript">
$(function() {
$('#ads').tabs().tabs("rotate", 1000, false);
/* jQuery UI らしさを出す不要なクラス指定を除去 */
$('#ads, #ads ul, #ads li, #ads div').removeClass("ui-widget ui-widget-content ui-corner-all ui-corner-top ui-corner-bottom ui-widget-header ui-tabs-panel ui-helper-reset");
});
</script>
<style>
/* 画像に合わせた幅、高さの指定。位置の調整。細かいところの上書き。 */
#ads {position:relative; top:0; left:0; width:690px; height:240px; margin:0; padding:0;}
#ads .ui-tabs-nav {position:absolute; top:200px; left:550px; margin:0; padding:0;}
#ads .ui-tabs-nav li {top:0; border:none;}
#ads .ui-tabs-nav li a {padding:0.1em 0.6em;}
/* デフォルト、選択、アクティブ、マウスオンなど状態に応じたCSSの上書き */
#ads .ui-state-default {border: none; background: #333333;}
#ads .ui-state-default a {color: #eeeeee; text-decoration: none; font-weight:bold;}
#ads .ui-state-hover {border: none; background: #cccccc;}
#ads .ui-state-hover a {color: #222222; text-decoration: none; font-weight:bold;}
#ads .ui-state-active {border: none; background: #eeeeee;}
#ads .ui-state-active a {color: #222222; text-decoration: none; font-weight:bold;}
</style>
５、できあがり
jQuery UIのtabsだけで よくあるスライドショーを作る – デモ
コメント