当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js类后台管理菜单类-MenuSwitch

Javascript
站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
用js实现的十进制的颜色值转换成十六进制的代码
DHTML form validation
js资料toString 方法
js资料prototype 属性
js实现的网站首页随机公告随机公告
一个效果写的HashTable代码
用js实现的一个Flash滚动轮换显示图片代码生成器
关于javascript函数的几个话题
极致之美——百行代码实现全新智能语言
htm调用JS代码
斑马线效果代码
从新浪弄下来的全屏广告代码 与使用说明
用js实现预览待上传的本地图片
用javascript自动显示最后更新时间
表单提交时自动复制内容到剪贴板的js代码
用roll.js实现的图片自动滚动+鼠标触动的特效
一段js小代码,计算距春节还有多少天
js中设计一段程序,让它能够打印自己的方法收集藏
自动生成文章摘要的代码[JavaScript 版本]

Javascript 中的 js类后台管理菜单类-MenuSwitch


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 121 ::
收藏到网摘: n/a

写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<allelements.length;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 = "block";
}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 = "block";
}
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 == "block";
}
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<this._elements.length;i++){
if(this._elements[i] != mItem){
var uls = this._elements[i].getElementsByTagName("ul");
uls[0].style.display = "none";
}
}
}
}
MenuSwitch.prototype.init = function(){
var instance = this;
this.collectElementbyClass();
if(this._elements.length==0){
return;
}
for(var i=0;i<this._elements.length;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);}
}
}
}

打包文件下载