JavaScript によるタブの切り替え UI の実装というネタで言えば、以前にも 「JavaScript でタブ切り替え UI を実装する」 で紹介しましたが、今回は、Yahoo! UI Library の中から、「TabView」 を使用してちょっとしたインターフェースを作ってみました。
実はサイトのリニューアルと合わせてオススメ書籍とか紹介するページを作って、そこで浅ましくアフィリエイトしようとか考えていたんですが、ただ商品を並べてもつまらないし、ちょっと変わった見せ方ができないものかということで考えた結果が、今回の TabView を使った見せ方。メモもかねて作り方を解説してみようと思います。長くなりそうなので何回かに分けるかも。
まずは実際に動作しているページですが、下記にあります。
JavaScript を有効にしてアクセスしてくださいね。JavaScript が無効だと単なるリストですので。
さて、見た目タブっぽくなっていないと思いますが、下部に表示されているサムネイルがタブと同様の役割をしています。各画像をクリックすればそれぞれの商品の詳細説明が表示されると思いますが、見た目はちょっと違うものの、動作自体はタブ UI とまったく同じです。
今回、この詳細説明部分のソースを切り替えるのに TabView を使用し、下側のスクロールするサムネイル部分を 「Carousel Component」 を使用して実装しています。
Carousel Component は、Yahoo! UI Library をベースに開発されたスライドショースクリプトで、縦横に画像をスクロールさせて表示するような UI が簡単に実現できます。つまり、本来タブである部分をこの Carousel Component を使用して一定数ずつスクロール表示させているというわけです。
それでは、実際に実装する方法ですが、まずは簡単な TabView の方から説明してみます。Yahoo! UI Library （以下、YUI） のページにもサンプルが載っているのでそちらで事足りますが、ここでは前回、「JavaScript でタブ切り替え UI を実装する」 で使用したサンプルソースを使用して、YUI 版にした場合を例にして説明しましょう。
前回使った XHTML ソースは下記です。
<div id="javascript_tab_sample"> <ul id="tab"> <li class="selected"><a href="#w3c">W3C</a></li> <li><a href="#xhtml">XHTML</a></li> <li><a href="#css">CSS</a></li> </ul> <dl id="w3c"> <dt>World Wide Web Consortium</dt> <dd> <p>...</p> </dd> </dl> <dl id="xhtml"> <dt>XHTML</dt> <dd> <p>...</p> </dd> </dl> <dl id="css"> <dt>Cascading Style Sheets</dt> <dd> <p>...</p> </dd> </dl> </div>
YUI 版にするためには、いくつかの id 属性を書き換え、div 要素、class 属性を追加してあげる必要があります。下記が YUI 用に修正したソースです。
<div id="javascript_tab_sample" class="yui-navset">
<ul id="tab" class="yui-nav">
<li class="selected"><a href="#tab1">W3C</a></li>
<li><a href="#tab2">XHTML</a></li>
<li><a href="#tab3">CSS</a></li>
</ul>
<div class="yui-content">
<dl id="tab1">
<dt>World Wide Web Consortium</dt>
<dd>
<p>...</p>
</dd>
</dl>
<dl id="tab2">
<dt>XHTML</dt>
<dd>
<p>...</p>
</dd>
</dl>
<dl id="tab3">
<dt>Cascading Style Sheets</dt>
<dd>
<p>...</p>
</dd>
</dl>
</div>
</div>
次に、肝心の YUI を入手しましょう。YUI のトップページにある 「Download YUI」 というボタンを押して、YUI をダウンロードします。今回は、YUI version 2.3.1 を使用している前提です。
ファイルを解凍したら、サーバにアップします。YUI はかなり大きなファイルですが、その中で JavaScript は 「yui/build/」 にまとまっていますので、それだけでもアップすれば大丈夫。ここではルートディレクトリにある 「js」 というディレクトリに、yui フォルダごとアップした想定で説明します。
JavaScript の読み込みは <head> ~ </head> で下記のように。
<script type="text/javascript" src="/js/yui/build/utilities/utilities.js"></script> <script type="text/javascript" src="/js/yui/build/tabview/tabview.js"></script>
次に同じく head 要素内、上記スクリプト読み込み用記述の下に、下記の記述を加えます。
<script type="text/javascript">
//<![CDATA[
var tabView = new YAHOO.widget.TabView('javascript_tab_sample');
//]]>
</script>
「javascript_tab_sample」 の部分は、XHTML ソース内の id 属性値と合わせます。もちろん、外部ファイルにして読み込んでも OK。
これでタブが機能するはずです。サンプルはこんな感じ。
TabView にはいくつかの実装方法がありますので、今回紹介した方法以外にもやり方はありますが、その辺は YUI のサイトを見てください。
長くなったので今回はこの辺で。次回は Carousel Component の使用方法について書いてみたいと思います。
