01
21
Prototype.js - JavaScriptでメニュータブ切り替え
2008-01-21- 使い方
- body内
- JavaScript
- スタイルシート
body部分、JavaScript、CSSを別々にソースを載せています。JavaScript以外は簡単にいじれると思うのでご自由に変更してご利用ください。
今回は「prototype.js でタブ切り替え - AUSGANG SOFT」様を参考にさせていただきました。
<div id="tabContent">
<ul id="tabIndex">
<li class="tab">タグ１</li>
<li class="tab">タグ２</li>
<li class="tab">タグ３</li>
<li class="tab">タグ４</li>
</ul>
<div id="tabBoxIndex">
<div class="tabBox">内容１</div>
<div class="tabBox">内容２</div>
<div class="tabBox">内容３</div>
<div class="tabBox">内容４</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;
}
