js類后臺管理菜單類-MenuSwitch
更新時間:2007年09月12日 21:42:43 作者:
寫MenuSwitch類的出發(fā)點(diǎn)是因?yàn)殡S著后臺管理項(xiàng)越來越多,從而導(dǎo)致菜單顯示部出現(xiàn)了滾動條導(dǎo)致頁面很不美觀,自己蒙生寫這個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);}
}
}
}
打包文件下載
這個功能類采用了目前比較流行的Web2.0做法,使用DIV+CSS+JS方式,將樣式和功能分開。我下面先把演示效果放出來吧
復(fù)制代碼 代碼如下:
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);}
}
}
}
打包文件下載
您可能感興趣的文章:
- JS實(shí)現(xiàn)適合于后臺使用的動畫折疊菜單效果
- js實(shí)現(xiàn)的后臺左側(cè)管理菜單代碼
- jsp中將后臺傳遞過來的json格式的list數(shù)據(jù)綁定到下拉菜單select
- 前臺JS(jquery ajax)調(diào)用后臺方法實(shí)現(xiàn)無刷新級聯(lián)菜單示例
- JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法
- ExtJS中設(shè)置下拉列表框不可編輯的方法
- 使用js實(shí)現(xiàn)一個可編輯的select下拉列表
- 讓你的網(wǎng)站可編輯的實(shí)現(xiàn)js代碼
- 用javascript實(shí)現(xiàn)div可編輯的常見方法
- JS實(shí)現(xiàn)可編輯的后臺管理菜單功能【附demo源碼下載】
相關(guān)文章
JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)三 原型模式(上)
在javaScript面向?qū)ο笤O(shè)計(jì)一和Javascript面向?qū)ο笤O(shè)計(jì)二中分別介紹了工廠模式和構(gòu)造函數(shù)模式,以及他們格式的優(yōu)缺點(diǎn),今天繼續(xù)講解原型模式2011-12-12
javascript 面向?qū)ο缶幊袒A(chǔ):繼承
"繼承是面向?qū)ο箝_發(fā)的又一個重要概念,它可以將現(xiàn)實(shí)生活的概念對應(yīng)帶程序邏輯中"?!? 雖然在JavaScript中沒有專門的機(jī)制來實(shí)現(xiàn)類的繼承,但可以通過拷貝一個類的prototype 到另外一個類來實(shí)現(xiàn)繼承”。2009-08-08
js 面向?qū)ο蟮募夹g(shù)創(chuàng)建高級 Web 應(yīng)用程序
在 C++ 或 C# 中,在談?wù)搶ο髸r,是指類或結(jié)構(gòu)的實(shí)例。對象有不同的屬性和方法,具體取決于將它們實(shí)例化的模板(即類)。2010-02-02
js創(chuàng)建對象的幾種常用方式小結(jié)(推薦)
最近在看javascript高級程序設(shè)計(jì),其中對對象的創(chuàng)建做了具體的闡述,綜合起來,總結(jié)了下(je知識庫javascript專欄由這方面的教程,有興趣的可以去知識庫看看)2010-10-10
js面向?qū)ο笤O(shè)計(jì)用{}好還是function(){}好(構(gòu)造函數(shù))
js面向?qū)ο笤O(shè)計(jì)用{}好還是function(){}好,大家給予了回復(fù),感覺不錯,特分享給大家。2011-10-10
JavaScript面向?qū)ο笾o態(tài)與非靜態(tài)類
使用JavaScript面向?qū)ο笸耆鲇谂既?,因?yàn)榇蟛糠謺r間我都是在無圖形界面的環(huán)境下工作,有時候就算是介入了web客戶端的工作的時候,在寫js和ajax時,最多的也只是寫寫function,從沒有考慮過要使用JavaScript面向?qū)ο筮@么高級的技巧。2010-02-02

