prototype.js でタブ切り替え

| コメント(14) | トラックバック(3)
  • はじめに
  • 使い方
  • 動作環境
  • ソースコード
  • リンク

たつをさんのCSS と JavaScript でタブ切り替えをprototype.jsを使って書き直しました。
極力、再利用が簡単になるようにしてみました。

ライセンスは本家の「無償・無保証・著作権放棄」に準じます。
ご自由にお使いください。

  1. サンプルはこちらからダウンロードできます。
    基本コードは以下のようになっています。
  2. <li class="tab"></li>の中にタブ名を、<div class="tabBox"></div>の中に対応するタブの内容を書きます。
  3. このセットを増やしていくことでタブはいくつでも増やせます。

スタイルシートや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.parfe.jp/einfach/archives/2008/0222180032.html

トラックバック(3)

トラックバックURL: http://a-h.parfe.jp/mt6/mt-tb.cgi/177

LifeScape [ライフスケイプ] - js + css によるタブ切り替え (2007年9月14日 22:55)

ここ数日、実験的に Ajax を駆使した Web アプリケーションを作成してました。まぁ、特に具体的なターゲットがあるわけではないんですが、こうした技術... 続きを読む

日刊にしこり-埼玉版- - CSS + JavaScriptでタブ切り替え (2007年10月 2日 19:28)

やはり、JavaScriptはおもしろいですね。 JavaScriptのAjax標準ライブラリになりつつprototype.js。 Ajaxを使う場... 続きを読む

CSSやJSでタブ表示されてる人もいるかと思いますが、今回prototype.jsを使ってタブ表示やってみましたのでご紹介します。 わたしのサイトではpr... 続きを読む

コメント(14)

いいですね。
#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アプリにも応用できそうですね。
ありがとうございます!

こんばんは。はじめまして。
面白いものをご紹介くださってありがとうございます。

HPの1ページに使ってみたのですが。。
1つめのタグには綺麗に書き込めるたので、喜んでいました
が、2つめのタグ欄以降に書き込めば、書き込むほど、
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.parfe.jp/rakucopy/rakucopy.html#support

> ymlab さん
ありがとうございます!
やはり設定画面などにはタブは必須ですよね。
お役に立って嬉しいです。

拙ブログのリニューアルに際し、
タブインターフェイスを採用しようと思い、色々と検討してみたところ、
prototype.jsによるタブUIを実現しているとのこと。
本当はjQuiery.jsのタブ機能を使うつもりだったんですが、
他の機能で使ってるprototype.jsとぶつかってしまい、渋々断念。
そこで色々と検索していて、ココに辿り着きました。

導入しようとアレコレしていて問題発生。
tabMaker.jsで構築したタブ内の要素の見た目の高さを統一させるために、
それぞれのタブのcssを、overflow:auto;とさせて、
スクロールバーを自動表示させたところ、
全てのタブにそれぞれのスクロールバーが表示されています。
かなり不細工で、ちょっと困っています。
何か原因など、考えられますでしょうか?
ご教授をお願いいたします。

こんにちは、はじめまして。大変気に入って、早速利用させて頂いてます。
質問なのですが、同一ページで複数利用しようと思ったのですが
idのtabにそれぞれタブ番号がついてしまい。
同一ページ内で複数利用できません・・・
どのようにしたら実装できるでしょうか?

こんにちは、感謝!感動!感謝!です。
いろいろと用途が広がりそうですよね~~!
お忙しいところ、本当にありがとうございます!

コメントする

このブログ記事について

このページは、AUSGANG SOFTが2006年10月12日 17:50に書いたブログ記事です。

ひとつ前のブログ記事は「Livedoor クリップ まとめて開くブックマークレット」です。

次のブログ記事は「Greasemonkeyでテキストエディタ」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ