- はじめに
- 使い方
- 動作環境
- ソースコード
- リンク
たつをさんのCSS と JavaScript でタブ切り替えをprototype.jsを使って書き直しました。
極力、再利用が簡単になるようにしてみました。
ライセンスは本家の「無償・無保証・著作権放棄」に準じます。
ご自由にお使いください。
- サンプルはこちらからダウンロードできます。
基本コードは以下のようになっています。
- <li class="tab"></li>の中にタブ名を、<div class="tabBox"></div>の中に対応するタブの内容を書きます。
- このセットを増やしていくことでタブはいくつでも増やせます。
スタイルシートやjavascriptが動作しないブラウザでも情報を表示できます。
一度組み込んでしまえば、DreamweaverなどのWYSIWYGなHTMLエディターで編集できるので既存のサイトにも組み込みやすいと思います。
Windows：IE6 SP1、Firefox 1.5.0.7、Opera 9.02 Mac:Safari で動作確認しました。
WinIE5、MacIE5などの以前のブラウザには対応していません。
タブの切り替えボタンはテーブルを使わずにリストで表現しています。
ただ、この方法だとONになってるタブ選択ボタンの下にも線が引かれてしまいます。困った。
設定画面でタブを使っているGoogleClendarやLivedoor Readerはどのようにしてるのか見たところ、デザインを変えることで違和感をなくしてました。頭イイ。
まんま取り入れさせてもらいました。
オブジェクト指向というのがよくわからないままprototype.jsのサンプル見て試行錯誤して書いたので、なんだかより複雑になってしまったような気が･･･。まぁいいか。
2006/10/13 追記：タブキーでリンクを移動した際に、タブ切り替えボタンに止まるように、aタグを自動的につけるように改良しました。
2008/2/23 追記：同じページで複数のタブを表示させる改良版を作りました。
prototype.js でタブ切り替え(複数表示版)
http://a-h.panepon.com/einfach/archives/2008/0222180032.html
いいですね。
#tabIndex li { cursor: pointer; } するともっといい感じかもしれません。
>jiroさん
たしかに。
さっそく取り入れておきました。
ありがとうございます。
はじめまして^^
tabMaker.js使わせていただきました。
メチャ気に入りました♪
ありがとうございます。
> bzbell さん
はじめまして。
コメントありがとうございます。
MovableType備忘録: prototype.jsを使ってタブ表示する
http://bizcaz.com/archives/2006/12/17-224228.php
MovableTypeのテンプレートに組み込んで使っていただいてるんですね。
おもしろい使い方ですねー(^^)
ありがとうございます！
はじめまして、かわぐちと申します。
tabMaker.js使わせていただきました。
カッコいいですね。
大変、気に入ってます。
私のブログの All Archives で使ってます。
よろしければ、ご覧ください。
＞ かわぐちさん
はじめまして。
ご利用ありがとうございます！
http://kslabo.wonder-mix.com/archives.html
おお、縦レイアウトで使われているんですね。
横と縦を組み合わせるとWEBアプリにも応用できそうですね。
ありがとうございます！
こんばんは。はじめまして。
面白いものをご紹介くださってありがとうございます。
ＨＰの1ページに使ってみたのですが。。
１つめのタグには綺麗に書き込めるたので、喜んでいました
が、２つめのタグ欄以降に書き込めば、書き込むほど、
1つ目のタグに書いたページの下に隙間ができて、スクロールしなくてはページの下まで行かなくなるくらい下の隙間が
あくのですが・・・これを回避する方法はあるのでしょうか？
よかったら教えてもらえませんか？
はじめまして。
タブをjavascriptで切り替えられる方法を調べているとヒットして、やってきました。
大変気に入っております。
今、作っているサイトの設定画面で使わせていただきました。
http://gakkouweblog.yh.land.to/admin/setup.php http://ymlabo.ddo.jp/~ymlab/blog/index.php?type=99
ありがとうございました。
> nikoniko さん
ご返答が遅くなってすみません。
作られているページを見せていただくことはできますか？
URL欄に入れてコメントしていただくか、↓の問い合わせフォームから送っていただければ、アドバイスできると思います。
http://a-h.panepon.com/rakucopy/rakucopy.html#support
> ymlab さん
ありがとうございます！
やはり設定画面などにはタブは必須ですよね。
お役に立って嬉しいです。
拙ブログのリニューアルに際し、
タブインターフェイスを採用しようと思い、色々と検討してみたところ、
prototype.jsによるタブUIを実現しているとのこと。
本当はjQuiery.jsのタブ機能を使うつもりだったんですが、
他の機能で使ってるprototype.jsとぶつかってしまい、渋々断念。
そこで色々と検索していて、ココに辿り着きました。
導入しようとアレコレしていて問題発生。
tabMaker.jsで構築したタブ内の要素の見た目の高さを統一させるために、
それぞれのタブのcssを、overflow:auto;とさせて、
スクロールバーを自動表示させたところ、
全てのタブにそれぞれのスクロールバーが表示されています。
かなり不細工で、ちょっと困っています。
何か原因など、考えられますでしょうか？
ご教授をお願いいたします。
＞ にのみや@QTVR Diary さん
ご質問ありがとうございます。
ライブラリというよりCSSの使い方かなと推察します。
例えば、
.noscroll {
overflow:hidden;
}
.scroll {
overflow:scroll;
}
<div class="tabBox noscroll"></div>
<div class="tabBox scroll"></div>
↑のようにclassを２つ指定することで、タブ毎にスクロールの有無を切り替えると、うまくいくのではないかと。
.noscrollはスクロールが発生しない前提なら、なくてもよいかもしれません。
こんにちは、はじめまして。大変気に入って、早速利用させて頂いてます。
質問なのですが、同一ページで複数利用しようと思ったのですが
idのtabにそれぞれタブ番号がついてしまい。
同一ページ内で複数利用できません・・・
どのようにしたら実装できるでしょうか？
gonta さん
ご要望ありがとうございます。
サンプルを作って記事にしてみました。
prototype.js でタブ切り替え(複数表示版) - AUSGANG SOFT
http://a-h.panepon.com/einfach/archives/2008/0222180032.html
参考にしていただければ、幸いです。
こんにちは、感謝！感動！感謝！です。
いろいろと用途が広がりそうですよね～～！
お忙しいところ、本当にありがとうございます！