Prototype.js - JavaScriptでメニュータブ切り替え

 JavaScriptフレームワークとして人気の高いPrototype.jsを活用してタブの切り替える方法です。ページ全体を切り替える必要がないので使いやすくなると思います。タブの数や大きさは自由に変更できるのでサンプルを参考にしてみてください。
  • 使い方
  • body内
  • JavaScript
  • スタイルシート
 body部分、JavaScript、CSSを別々にソースを載せています。JavaScript以外は簡単にいじれると思うのでご自由に変更してご利用ください。
 タブメニューについてはぜひこれらもご参考に。
 ・prototype.jsでアコーディオンなタブな横メニュー
 ・JavaScriptでアコーディオンでタブな横メニュー
 今回は「prototype.js でタブ切り替え - AUSGANG SOFT」様を参考にさせていただきました。
 <div id="tabContent">
  <ul id="tabIndex">
    <li class="tab">タグ1</li>
    <li class="tab">タグ2</li>
    <li class="tab">タグ3</li>
    <li class="tab">タグ4</li>
      </ul>
  <div id="tabBoxIndex">
    <div class="tabBox">内容1</div>
    <div class="tabBox">内容2</div>
    <div class="tabBox">内容3</div>
    <div class="tabBox">内容4</div>
  </div>
 </div>
JavaScriptはprototype.jsとtabMaker.jsを使用しています。
<script language="JavaScript" type="text/javascript"
 src="prototype.js"></script>

<script language="JavaScript" type="text/javascript"
 src="tabMaker.js"></script>
tabMaker.jsこんな感じです。コピペして「tabMaker.js」として保存してください。
Event.observe(window, 'load', function(){
        var start = new TabMaker('tab');
        start.create();
});

var TabMaker = Class.create()
TabMaker.prototype = {
        initialize: function(tab) {
                this.tabLnegth = gcn(tab).length;
                this.tabName = tab;
        },
        create: function() {
                var menu = new TabIndex(this.tabName);
                for (var i = 0; i < this.tabLnegth; i++) {
                        menu.appendTab(new Tab('Tab' + i, (i==0)));
                }
                menu.setTab();
        }
}

var Tab = Class.create();
Tab.prototype = {
        initialize: function(name, open) {
                this.name = name;
                this.page = name + 'Box';
                this.open = open;
        },
        styleTab: function() {
                if (this.open)
                        this.setStyle('visible', '', 'open');
                else
                        this.setStyle('hidden', 'absolute', 'close');
                this.open = false;
        },
        setStyle: function(visibility, position, className){
                var page = $(this.page).style;
                var name = $(this.name);
                page.visibility = visibility;
                page.position = position;
                name.className = className;
        }
}

var TabIndex = Class.create();
TabIndex.prototype = {
        initialize : function(tab) {
                this.last = 0;
                this.tabs = new Array();
                this.tabName = tab;
        },
        getTabAt : function(index) {
                return this.tabs[index];
        },
        appendTab : function(tab) {
                this.tabs[this.last] = tab;
                gcn(this.tabName)[this.last].id = tab.name;
                gcn(this.tabName+'Box')[this.last].id = tab.page;
                this.last++;
                var link = document.createElement('a');
                link.innerHTML = $(tab.name).innerHTML;
                link.href = 'javascript:void(0);'
                $(tab.name).innerHTML = '';
                $(tab.name).appendChild(link);
                $(tab.name).onclick = function(){
                        tab.open = true;
                        this.setTab();
                }.bind(this);
        },
        getLength : function() {
                return this.last;
        },
        each : function(func) {
                for (var i = 0; i < this.getLength(); i++) {
                        func(this.getTabAt(i));
                }
        },
        setTab: function() {
                this.each(function(tab) {
                                tab.styleTab();
                });
        }
};
function gcn(id){
        return document.getElementsByClassName(id);
}
#tabContent {
  background-color : #ffffff;
  margin : 20px -5px 0px -5px;
  width : 500px;
  padding : 18px 0px 0px 0px;
}

#tabIndex {
  margin-left : 30px;
}

#tabIndex LI {
  float:left;
  margin-right: 10px;
  padding : 3px 8px 2px 8px;
  font-size: 14px;
  list-style-type: none;
  cursor: pointer;
  display: block;
  margin-bottom : 0px;
  margin-top : auto;
  margin-left : auto;
}

#tabIndex .close {
  text-decoration : none;
  border-width : 1px;
  border-style : solid;
  border-color : #006699;
  background-color : #dfdfff;
}

#tabIndex .open {
  text-decoration: none;
  border-width : 1px;
  border-style : solid;
  border-color : #006699 ;
  font-weight : normal;
  background-color : #006699;
}

#tabBoxIndex {
  font-size: 12px;
  line-height: 150%;
  background-color : #ffffff;   
  clear: both;
  margin : -20px 0px 0px 0px;
  padding : 5px 5px 10px 10px;
  border-width : 1px;
  border-style : solid;
  border-color : #006699;

}
#tabIndex .open A{
  text-decoration : none;
  color : white;
}
#tabIndex .close A{
  font-weight : normal;
  text-decoration : none;
  color : #006699;
}

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
「Prototype.js - JavaScriptでメニュータブ切り替え」
大変参考になりました。有難うございます。

ただ、一つ問題があって、「tabIndex」のところが上手く表示されません。
縦に並んだリンクつきの文字になってしまいます。
リンクのところにマウスを持っていくと「手」のポインターに変化するので、
「#tabIndex LI」は読み込んでいるみたいですが、
「#tabIndex .close」と「#tabIndex .open 」を読み取ってくれないみたいです。

なにか、よいアドバイスはありますでしょうか?
【2009/06/21 02:32】 | Keisuke #JalddpaA | [edit]
当ブログを参考にしていただきありがとうございます。

ご質問の内容では原因は特定できませんが
問題はJavaScriptにあると思います。
指定した外部ファイルが存在しているかなど
身近なところから確認していってはどうでしょうか?
【2009/06/23 22:43】 | 管理人 #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加