jsバックグラウンド管理メニューclass-MenuSwitch_jsオブジェクト指向

MenuSwitch クラスを書くきっかけは、背景の管理項目が増えてくるとメニュー表示にスクロールバーが現れて非常に見苦しくなったので、この JS クラスを自分で書く必要があったということでした。
この関数クラスは、現在一般的な Web2.0 アプローチを採用し、DIV CSS JS メソッドを使用してスタイルと機能を分離します。まずデモンストレーション効果を示します

コードをコピーします コードは次のとおりです:

function MenuSwitch(className){
this._elements = [];
this._default = -1;
this._className = className;
this._previous = false;
}
MenuSwitch.prototype.setDefault = function(id){
this._default = Number(id);
}
MenuSwitch.prototype.setPrevious = function(flag){
this._previous = Boolean(flag);
}
MenuSwitch.prototype.collectElementbyClass = function(){
this._elements = [];
var allelements = document.getElementsByTagName("div");
for(var i=0;i var mItem = allelements[i];
if (typeof mItem.className == "string" && mItem.className == this._className){
var h3s = mItem.getElementsByTagName("h3");
var uls = mItem.getElementsByTagName("ul");
if(h3s.length == 1 && uls.length == 1){
h3s[0].style.cursor = "hand";                    
if(this._default == this._elements.length){
uls[0].style.display = "ブロック";    
}else{
uls[0].style.display = "none";    

this._elements[this._elements.length] = mItem;
}
}
}
}
MenuSwitch.prototype.open = function(mElement){
var uls = mElement.getElementsByTagName("ul");
uls[0].style.display = "ブロック";
}
MenuSwitch.prototype.close = function(mElement){
var uls = mElement.getElementsByTagName("ul");
uls[0].style.display = "none";
}
MenuSwitch.prototype.isOpen = function(mElement){
var uls = mElement.getElementsByTagName("ul");        
return uls[0].style.display == "ブロック";
}
MenuSwitch.prototype.toggledisplay = function(header){
var mItem;
if(window.addEventListener){
mItem = header.parentNode;
}else{
mItem = header.parentElement;
}
if(this.isOpen(mItem)){
this.close(mItem);
}else{
this.open(mItem);
}
if(!this._previous){
for(var i=0;i if(this._elements[i] != mItem ){
var uls = this._elements[i].getElementsByTagName("ul");
uls[0].style.display = "none";        

}

}
MenuSwitch.prototype.init = function(){
varインスタンス = これ;
this.collectElementbyClass();
if(this._elements.length==0){
return;
}
for(var i=0;i var h3s = this._elements[i].getElementsByTagName("h3");            
if(window.addEventListener){
h3s[0].addEventListener("click",function(){instance.toggledisplay(this);},false);
}else{
h3s[0].onclick = function(){instance.toggledisplay(this);}
}
}
}

打包文件下ダウンロード