あまり重要でないけど表示したいといったコンテンツをタブでまとめたり、
派生項目がたくさんあるようなコンテンツをタブで分散したり、
というようなことは、アプリケーションではよくありますよね。
今回、jQueryを使ってXoops(Cube)でタブを実現する方法について、
少し試してみましたので、以下で説明します。
■０．今回の前提
（１）「jQueryを使ったタブ」のサンプルとして、こちらのサンプルを参照します。
（２）Xoops画面に配置した幾つかのブロックをタブにまとめることを目標とする
■１．そもそもjavascriptって、どうやって取り込むの？
jQueryは、要するに、javascriptです。
フツーのHTMLの場合、javascriptを取り込むには、
<head>～</head>で囲まれた部分に、
<script type="text/javascript">
alert("こんにちは！");
</script>
のように書いたり、
<script type="text/javascript" src="hogehoge.js"></script>
のように書いたりします。
※<body>～</body>で囲まれた部分に書くことも出来ますが、
可読性や保守性を考慮して、出来るだけ避けたほうが良いようです。
Xoops(Cube)でjqueryのようなJavascriptを取り込む場合も同じです。
ただ、Xoops(Cube)の場合、～.htmlがアチコチにあるようなイメージがあります。
どのhtmlをイジればよいのか判断するためには、予備知識が必要になりますので、
次節で説明します。
■２．そもそも何をイジればよいのか ※Xoops(Cube)の画面について
「幾つかのブロックをタブにまとめる」のようなことをする場合、
そもそも、どのファイルをイジればよいのか、分かるでしょうか？
それを理解するためには、Xoops(Cube)の画面描画について
理解することが必要です。
奥深く見ていけばキリがありませんが、極めてザックリとでも
理解しておくことで、「どこを触ればいいのか」が分かるようになります。
Xoops(Cube)の画面描画は、次のような流れになっています。
・各モジュール・ブロックのtemplate
↓
・PHP(Smarty)で解析
↓
・PHP変数($xoops_lblockとか)に格納
↓
・テーマのtemplateにPHP変数をセット
↓
・テーマのtemplateをPHP(Smarty)で解析
↓
・Xoops(Cube)の画面として描画
つまり、テーマという大枠のhtmlの中に、
各モジュールやブロックが自動的に組み込まれていきます。
※自動的に組み込まれていく流れが、上記の流れになります。
そもそも、htmlファイルの中に<head>～</head>が現れる部分は
テーマにしかありません。
従って、今回イジるのは、テーマのhtmlファイルということになるワケです。
■３．そもそもタブって、どうやってるの？
これは、Xoopsの話ではなく、htmlとかjavascriptの話になります。
※一般的にタブでやってることをXoops(Cube)にも適用するだけの話、
ということです。
ここで、最初のほうで挙げたサンプルを参照してみます。
まず、タブに表示するデータはすべて、<ul>でHTMLに書いてあります。
<div id="container">
<ul class="tab">
<li><ahref="#tab1"class="selected">JavaScript</a></li>
<li><ahref="#tab2">CSS</a></li>
<li><ahref="#tab3">HTML</a></li>
<li><ahref="#tab4">jQuery</a></li>
<li><ahref="#tab5">XHTML</a></li>
</ul>
<ul class="panel">
<li id="tab1">aaa<li>
<li id="tab2">bbb<li>
<li id="tab3">ccc<li>
<li id="tab4">ddd<li>
<li id="tab5">eee<li>
</ul>
</div>
タブのラベルに表示する文字はclass="tab"のulに、<ul class="tab">
<li><ahref="#tab1"class="selected">JavaScript</a></li>
<li><ahref="#tab2">CSS</a></li>
<li><ahref="#tab3">HTML</a></li>
<li><ahref="#tab4">jQuery</a></li>
<li><ahref="#tab5">XHTML</a></li>
</ul>
<ul class="panel">
<li id="tab1">aaa<li>
<li id="tab2">bbb<li>
<li id="tab3">ccc<li>
<li id="tab4">ddd<li>
<li id="tab5">eee<li>
</ul>
</div>
タブの内容として表示するデータはclass="panel"のulに
それぞれ書かれているのが分かります。
このHTMLに対して、javascript（jQuery）で
「panelでは現在選択されているタブの内容だけ表示する」
ように制御しています。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> //・・・(A)
<script type="text/javascript">
$(function(){ //・・・(B)
$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide();
$("ul.tab li a").click(function(){
$("ul.tab li a").removeClass("selected");
$(this).addClass("selected");
$("ul.panel li").slideUp("fast");
$($(this).attr("href")).slideDown("fast");
return false;
});
});
</script>
上記(A)の部分では、Google API経由でjQueryを参照しています。<script type="text/javascript">
$(function(){ //・・・(B)
$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide();
$("ul.tab li a").click(function(){
$("ul.tab li a").removeClass("selected");
$(this).addClass("selected");
$("ul.panel li").slideUp("fast");
$($(this).attr("href")).slideDown("fast");
return false;
});
});
</script>
また、上記(B)の関数内で、
「panelでは現在選択されているタブの内容だけ表示する」
ように制御しています。
ただし、少し手抜きが過ぎるようです。
つまり、panelに表示するデータとして、ulタグによるリストを表示しようとすると
該当リストが表示されなくなります。
そのため、次のように改造してやります。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> //・・・(A)
<script type="text/javascript">
$(function(){ //・・・(B)
$("ul.panel > li:not("+$("ul.tab li a.selected").attr("href")+")").hide(); //・・・(modify 1)
$("ul.tab li a").click(function(){
$("ul.tab li a").removeClass("selected");
$(this).addClass("selected");
$("ul.panel > li").slideUp("fast"); //・・・(modify 2)
$($(this).attr("href")).slideDown("fast");
return false;
});
});
</script>
分かりにくいですが、panelのliを参照する箇所を<script type="text/javascript">
$(function(){ //・・・(B)
$("ul.panel > li:not("+$("ul.tab li a.selected").attr("href")+")").hide(); //・・・(modify 1)
$("ul.tab li a").click(function(){
$("ul.tab li a").removeClass("selected");
$(this).addClass("selected");
$("ul.panel > li").slideUp("fast"); //・・・(modify 2)
$($(this).attr("href")).slideDown("fast");
return false;
});
});
</script>
「panel li」ではなく「panel > li」
に変更してあります。
あとは、CSSを使って、class="tab"の部分をタブらしくヨコに並べるなどします。
※display:blockにしてfloat:leftするなど、お馴染みの方法です。
この例だと、class="panel"側でclear:bothしているようです。
余談ですが、こういうのもCSS3だとラクが出来るそうでして、
いわゆるclear-fix的なテクニックが不要になるらしいです。
■４．Xoops(Cube)でタブを使ってみよう
すっかり前提が長くなってしまいましたが、
ここまで、上記１．２．３．と説明してきた内容を元に
いよいよXoops(Cube)でタブを使ってみましょう。
大まかな手順は、上記３．から、
・「HTMLの編集」
↓
・「javascript(jQuery)の導入」
↓
・「cssで見た目を整える」
とすればよいことが分かります。
さらに、上記２．から、
「HTMLの編集」は、「テーマ(HTML)の編集」をすればよい
ことが分かりますので、Xoops(Cube)の場合、
・「テーマ(HTML)の編集」
↓
・「javascript(jQuery)の導入」
↓
・「cssで見た目を整える」
といった手順で、Xoops(Cube)にタブを導入してみます。
手順１：「テーマ(HTML)の編集」
今回は、LEFTブロックに配置されるブロックをすべてタブに入れてみます。
テーマ(HTML)のLEFTブロックに該当する部分について、
上記３．と同じようにするために、次のように修正します。
<div id="container">
<ul class="tab">
<{foreach item=block from=$xoops_lblocks name=tab_title}>
<li><a href="#tab<{$smarty.foreach.tab_title.iteration}>" <{if $smarty.foreach.tab_title.first}>class="selected"<{/if}>><{$block.title}></a></li>
<{/foreach}>
</ul>
<ul class="panel">
<{foreach item=block from=$xoops_lblocks name=tab_content}>
<li id="tab<{$smarty.foreach.tab_content.iteration}>"><{$block.content}></li>
<{/foreach}>
</ul>
</div>
<ul class="tab">
<{foreach item=block from=$xoops_lblocks name=tab_title}>
<li><a href="#tab<{$smarty.foreach.tab_title.iteration}>" <{if $smarty.foreach.tab_title.first}>class="selected"<{/if}>><{$block.title}></a></li>
<{/foreach}>
</ul>
<ul class="panel">
<{foreach item=block from=$xoops_lblocks name=tab_content}>
<li id="tab<{$smarty.foreach.tab_content.iteration}>"><{$block.content}></li>
<{/foreach}>
</ul>
</div>
手順２：「javascript(jQuery)の導入」
上記１．で説明したように、<head>～</head>で囲まれた箇所に
javascript(jQuery)を導入するための記述を追加します。
追加する内容は、上記３．で説明したjavascriptをそのまま転記すれば大丈夫です。
転記する場所は、テーマ(HTML)の<head>～</head>で囲まれた箇所の
最後にでも書いておけば大丈夫です。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul.panel > li:not("+$("ul.tab li a.selected").attr("href")+")").hide();
$("ul.tab li a").click(function(){
$("ul.tab li a").removeClass("selected");
$(this).addClass("selected");
$("ul.panel > li").slideUp("fast");
$($(this).attr("href")).slideDown("fast");
return false;
});
});
</script>
<script type="text/javascript">
$(function(){
$("ul.panel > li:not("+$("ul.tab li a.selected").attr("href")+")").hide();
$("ul.tab li a").click(function(){
$("ul.tab li a").removeClass("selected");
$(this).addClass("selected");
$("ul.panel > li").slideUp("fast");
$($(this).attr("href")).slideDown("fast");
return false;
});
});
</script>
手順３：「cssで見た目を整える」
上記３．でも触れたように、タブをタブらしく見せるなど、
cssで見た目を整えてあげましょう。
リストをヨコに並べるには、「float:left;」を使うのが定番みたいです。
「float:left;」だとそれを解除するコードが必要になりますが、
この辺りのテクニックは「clear-fix」で検索すればたくさん見つかります。
タブの背景画像をオンラインで作ってくれるサービスなんかも
検索すればたくさん見つかります。
デザインを頑張るのは、割と楽しいです。（仕事でなければ・・・）
どうか頑張ってデザインしてみてください。
・・・長くなりましたが、以上で説明は終わりですが
どうだったでしょうか？
結局、長々と説明した割りには、Xoops(Cube)に特化した部分は
ほとんど出てきませんでした。
実は、Xoops(Cube)だからって、何か特別なことをしなければ
いけないということはありません。
でも、Xoops(Cube)って難しいと思われがちで、敬遠されがちなので、
こういったエントリを書いてみました。
皆様の何かのご参考になれば、幸いです。
0 件のコメント:
コメントを投稿
どうかお気軽にコメント頂ければ幸いです。