js类后台管理菜单类-MenuSwitch
js类后台管理菜单类-MenuSwitch
发布时间:2016-12-30 来源:查字典编辑
摘要:写MenuSwitch类的出发点是因为随着后台管理项越来越多,从而导致菜单显示部出现了滚动条导致页面很不美观,自己蒙生写这个JS类了。这个功...

写MenuSwitch类的出发点是因为随着后台管理项越来越多,从而导致菜单显示部出现了滚动条导致页面很不美观,自己蒙生写这个JS类了。

这个功能类采用了目前比较流行的Web2.0做法,使用DIV+CSS+JS方式,将样式和功能分开。我下面先把演示效果放出来吧

复制代码 代码如下:

functionMenuSwitch(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=[];

varallelements=document.getElementsByTagName("div");

for(vari=0;i<allelements.length;i++){

varmItem=allelements[i];

if(typeofmItem.className=="string"&&mItem.className==this._className){

varh3s=mItem.getElementsByTagName("h3");

varuls=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="block";

}else{

uls[0].style.display="none";

}

this._elements[this._elements.length]=mItem;

}

}

}

}

MenuSwitch.prototype.open=function(mElement){

varuls=mElement.getElementsByTagName("ul");

uls[0].style.display="block";

}

MenuSwitch.prototype.close=function(mElement){

varuls=mElement.getElementsByTagName("ul");

uls[0].style.display="none";

}

MenuSwitch.prototype.isOpen=function(mElement){

varuls=mElement.getElementsByTagName("ul");

returnuls[0].style.display=="block";

}

MenuSwitch.prototype.toggledisplay=function(header){

varmItem;

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(vari=0;i<this._elements.length;i++){

if(this._elements[i]!=mItem){

varuls=this._elements[i].getElementsByTagName("ul");

uls[0].style.display="none";

}

}

}

}

MenuSwitch.prototype.init=function(){

varinstance=this;

this.collectElementbyClass();

if(this._elements.length==0){

return;

}

for(vari=0;i<this._elements.length;i++){

varh3s=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);}

}

}

}

打包文件下载

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类