Movable Type 備忘録

 prototype.jsを使ってタブ表示する

  • Dec172006
  • Vote:
    http://bizcaz.com/archives/2006/12/17-224228.php
  • Categories: prototype
  • Tags:
  • Social Bookmark

CSSやJSでタブ表示されてる人もいるかと思いますが、今回prototype.jsを使ってタブ表示やってみましたのでご紹介します。

わたしのサイトではprototype.jsって結構使ってるのですが、Ajaxを使うためのライブラリなのかと思ってました。 実はそうじゃなくて、JSを統一した共通のインターフェイスとして使うためのライブラリみたいで、Ajaxもサポートしてますよ…というものみたいですね。
今回のカスタマイズでこんな使い方もできるんだ…ということを初めて知りました。

今回お世話になったサイトは、AUSGANG SOFT様です。

AUSGANG SOFTさんのところで、prototype.js でタブ切り替えというのが紹介されてたので、さっそくわたしのところでもサイトマップをタブ表示させてみました。

使い方はカンタンで、AUSGANG SOFTさんのところでも詳しく説明されてます。

▼tabMaker.jsの入手はこちらから▼
http://a-h.parfe.jp/einfach/archives/2006/1012175043.html

タブ表示の仕方

まず動作確認してみます。
上記URLから、tabMaker_sample.zipをダウンロードして、適当なフォルダに展開します。
そして、tabMaker_sampleフォルダをそのままサーバにアップロードしてください。 アップロード先はどこでも構いません。

次に、ブラウザからアップロードしたindex.htmlを表示してみます。 そうすると、タブ表示のサンプルページが表示されますね。

「使い方」というタブにもあるように、単純な構造になっているので何もムズかしいことはありません。 わたしが作ったサイトマップでは、タブの内容を囲う<div class="tabBox">～</div>のところに、カテゴリごとのエントリ一覧を表示するようにしています。 具体的には以下のようなXHTMLになります。

  1. <div id="tabContent">
  2.     <ul id="tabIndex">
  3.     <MTTopLevelCategories>
  4.         <MTIfNonZero tag="MTCategoryCount">
  5.             <li class="tab"><$MTCategoryLabel decode_html="1" remove_html="1"$></li>
  6.         <MTElse>
  7.         </MTElse>
  8.         </MTIfNonZero>
  9.         <MTSubCatsRecurse>
  10.     </MTTopLevelCategories>
  11.     </ul>
  12.  
  13.     <div id="tabBoxIndex">
  14.         <MTTopLevelCategories>
  15.         <MTIfNonZero tag="MTCategoryCount">
  16.             <ul class="tabBox">
  17.                 <MTEntries sort_order="descend">
  18.                 <li><$MTEntryDate language='en' format='%Y/%m/%d'$> <a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
  19.                 </MTEntries>
  20.             </ul>
  21.         <MTElse>
  22.         </MTElse>
  23.         </MTIfNonZero>
  24.         <MTSubCatsRecurse>
  25.         </MTTopLevelCategories>
  26.     </div>
  27. </div>

上記例では、エントリが投稿された、すべてのカテゴリ内のエントリ一覧を表示しています。
青い字の部分がタブ表示されるところです。 緑の字の部分がタブが選択されたときに表示される内容になります。
大事な部分を赤い字で強調してみました。 必ず赤い字で示すようなID、クラス名を付けてください。そうしないと正しくJSが動作しませんので。

あとは、<head>～</head>の間に以下のコードを追加して、CSSをサイトに合わせて色などを調整して、再構築するだけでした。

  1. <script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
  2. <script type="text/javascript" src="<$MTBlogURL$>tabMaker.js"></script>
  3.  
  4. <link rel="stylesheet" href="tabMaker.css" type="text/css" />

以上で、縦に長かったサイトマップだったのですが、カテゴリ別にタブ表示することで見やすくなりまいた。 こちらのDynamic Drive CSS Library- Plastic Tabs menuでデザインしたタブと併用してもいいかも、ですの。

では。

 Trackback Pings(1)

from K's Labo

前々からある知人に、このブログの今までのエントリーの一覧は表示されないの？って聞...

Tracked on March 2, 2007

 Comments(9)

#1: Posted by magnet @ December 18, 2006 [REPLY]
user-pic

ものすごくおひさしぶりです＾＾
いいですね＾＾　タブ表示。使えそうです＾＾
あとでじっくり読ませていただきます～

 
#2: Posted by bzbell @ December 18, 2006 [REPLY]
user-pic

>>1 magnet さん

ご無沙汰しております^^
サイトの方の更新がここしばらくないので、ご多忙のようですね

でも、忙しいっていいことですよ(￣∇￣)b
わたしは暇ほど嫌なものはないので・・・。

> あとでじっくり読ませていただきます～

はい♪

 
#3: Posted by かわぐち @ March 2, 2007 [REPLY]
user-pic

かわぐちです。

いいですね、これ。
早速、導入してみよ～と。

でも、いつ完成するか・・・。

 
#4: Posted by かわぐち @ March 2, 2007 [REPLY]
user-pic

またまた、かわぐちです。

このエントリーを参考にして、タブ表示を私のブログに設置してみました。
もしよければ、見てやってください。
All Archives ページにあります。

 
#5: Posted by bzbell @ March 2, 2007 [REPLY]
user-pic

>>3 かわぐち さん
>>4 かわぐち さん

カックいいですねっ!!
縦に羅列したんですね。いいかんじですの♪

 
#6: Posted by yoichi @ May 5, 2007 [REPLY]
user-pic

bzbell様
こんにちわ。ご無沙汰していました。
さてこちらのタブ表示、使わせていただきました。ありがとうございました。
ただ何だか変になってしまいました。タブがうまく表示できないのと、なぜかページのフッターの下の方に膨大な空スペースができてしまいました。何を間違ってしまっているのかが分かりません（汗）。
お手すきの時にちょっと覗いてみてアドバイスいただけると大変助かります。いつもいつもすみません。
ちなみに使っているページは以下のとおりです。
http://yoichi.typepad.jp/blog/links.html

 
#7: Posted by bzbell @ May 6, 2007 [REPLY]
user-pic

>>6 yoichi さん

こんにちわ^^

yoichiさんのサイトのソースをざっと拝見させてもらいました。
見たところ、タブ表示に関しての記述は問題なさそうです (;￣∇￣A

そこで、以下のことを確認していただけますか。

  1. tabMaker.jsを</body>の直上あたりに移動して確認してみる。
    これはtabMaker.jsが実行される前に、他JavaScript(BlogPet)が実行完了済みである必要があるため。
  2. 使用している他JavaScript(BlogPet)をコメントして、tabMaker.jsだけだとどう表示だれるか確認してみる。
    これは他JavaScript(BlogPet)と何らかの干渉が発生しているか確認するため。

以上です (￣∇￣)/

 
#8: Posted by yoichi @ May 6, 2007 [REPLY]
user-pic

bzbell様

ご指南ありがとうございました。

けれどもどうしてもうまくいきませんでした。やはり他のＪＳが干渉してしまっているようですがどれも今は外したくないので、ここは涙を呑んでDynamic Drive CSSのタブを使ってhtmlページを数枚こちょこちょ作りました。

素人には色々と難しいですね。もっとちゃんと勉強しくっちゃ！．．．なんて云うばかりで絶対しませんけどね（笑）

お騒がせいたしました。お手数をおかけしてしまい、面目なく。
重ねて、どうもありがとうございました。

 
#9: Posted by bzbell @ May 6, 2007 [REPLY]
user-pic

>>8 yoichi さん

こんにちわ^^

そうですか。しょうがないですよね。
JavaScriptって便利な分、他のJavaScriptと干渉することがあるようで、わたしもその類で悩まされること多々です（つω-`｡）

お役に立てなくてすいません (m;_ _)mペコ

 

 Post a Comment

 

コメント用フィード