XP折疊菜單&仿QQ2006菜單
更新時間:2006年12月16日 00:00:00 作者:
特性:
更好的外觀:在菜單標(biāo)題上添加了圖標(biāo)。
更好的動作:實(shí)現(xiàn)了菜單的滑入,滑出效果。
更易的使用:添加了許多注釋,方便使用。
當(dāng)然還存在一些沒有發(fā)現(xiàn)的問題。盼望大家指教:)
實(shí)現(xiàn)折疊式動態(tài)改變style.height的值 這樣不是很專業(yè):) 不過很像了!
100%的原裝winXP折疊菜單的外觀!如果不一樣您提出來我改。
(qq2006 在點(diǎn)擊的時候還有一些抖動。)
先看圖最新添加了 qq2006 的外觀


測試網(wǎng)頁的地址:navbar.htm
詳細(xì)網(wǎng)址:http://lxbzj.com/showartical.asp?N_id=156
下載:http://lxbzj.com/upload/200604/menu.zip
新版本還在制作中。。。(更新的js在19層)
這里是2006-04-13日修改過的js
-不再需要在每一個<a>里面添加 onclick 和 onkeypress 了 這樣 網(wǎng)頁和js 進(jìn)一步的分離
-定義了一個menu類 負(fù)責(zé)將事件添加到每一個 菜單里面
-修改了onkeypress
-添加interval處理
-添加了一個收起的加速度(不過不是很明顯)
-添加了Navbar對象,實(shí)現(xiàn)在一組menu中只有一個能打開
-新js 不斷更新中。。。
+-navbar.js中的代碼:
// JavaScript Document
/*========================================
* 文件名: navbar.js
* 編 碼: Utf-8
* 功 能:實(shí)現(xiàn)菜單折疊的javaScript
* 作 者:雷曉寶
* 版 本: 2.3
* 時 間:2006-03-07
===========================================*/
//========================定義menu類==================;
function Menu(head,child,dir,speed,init_state,ext_on,ext_off)
{
this.head = document.getElementById(head);//菜單頭
this.body = document.getElementById(child);//菜單體
this.direction = dir;//菜單收起的方向
this.speed = speed;//速度
this.ext_on = ext_on;//擴(kuò)展菜單展開調(diào)用
this.ext_off = ext_off;//擴(kuò)展菜單收起調(diào)用
this.init_state = init_state;//設(shè)置菜單的初始狀態(tài) true/false
this.a = 10;//加速度
//私用變量;
this._interval = false;
this._last_state = false;
this._size = false;
this._temp = false;
this._js = false;
this._div = false;
this._parent = false;
this._parent_control = false;
var self = this;
var temp = new Array(null,null);//temp[0]用來給_off()用,temp[1]用來給_on()用
//=============================方法=============================
//點(diǎn)擊事件處理
this.click = function(e)
{
if (self._parent_control)
{
self._parent._control(self);
return false;
}
else
{
Interval.clear(self._interval);
if (self._last_state == false)
{
self._on();
return false;
}
else
{
self._off();
return false;
}
}
}
//初始化
this.init = function()
{
this.head.onclick = this.click;
this.head.onkeypress = function(e)
{
e||(e=window.event);
if (!(e.keyCode ==32 || e.keyCode == 0))return;
//alert(':)');
self.click();
}
for(var i=0;i<this.body.childNodes.length;i++)
{
if (this.body.childNodes[i].nodeType==1)
{
this._div=this.body.childNodes[i];
break;
}
}
if (parseInt(this.body.style.height))//this.body.style.getPropertyCSSValue('height')this.body.currentStyle.height
{
this._size = parseInt(this.body.style.height);
}
else
{
this._size = this._div.offsetHeight;
}
switch (this.init_state)
{
case true:
if (this.body.style.display == 'none')
{
//this._last_state = false;
this._on();
}
else
{
this._last_state = true;
}
break;
default://case false:
if (this.body.style.display !='none')
{
this._last_state = true;
this._off();
}
break;
}
}
//展開菜單
this._on = function()
{
if (self._last_state == false)
{
self._last_state = true;
self.body.style.display="";
temp[1] = self.a?2*parseInt(Math.sqrt(self.a*self._size))+1:self._size/5;
if (isNaN(parseInt(self.body.style.height)))self.body.style.height="0px";
if (self.ext_on)
{
self.ext_on(self.head,self.body)
}
self._interval = Interval.set(self._action_on,speed);
}
//setTimeout('slowon("'+self.body.id+'")',5)
}
//收起菜單
this._off = function()
{
if (self._last_state == true)
{
self._last_state = false;
//if (temp[0] == null)
//{
temp[0]=self.a?2*parseInt(Math.sqrt(self.a*self._size))+1:self._size/5;;
//}
if(isNaN(parseInt(self.body.style.height)))self.body.style.height = self._size+'px';
if (self.ext_off)
{
self.ext_off(self.head,self.body)
}
self._interval = Interval.set(self._action_off,this.speed);
}
}
//以下處理滑動
this._action_on = function()
{
if (parseInt(self.body.style.height)+temp[1]>self._size)
{
self.body.style.height = self._size+'px';
Interval.clear(self._interval);
}
else
{
self.body.style.height = parseInt(self.body.style.height)+temp[1]+'px';
temp[1] +=self.a;
}
}
this._action_off = function()
{
if(parseInt(self.body.style.height)-temp[0]<0)
{
Interval.clear(self._interval);
self.body.style.display = "none";
}
else
{
self.body.style.height = parseInt(self.body.style.height)-temp[0]+'px';
temp[0]-=self.a;
}
}
}
//meanu類結(jié)束
//====================定義Navbar類,用來管理一組menu集合===============================
function navbar(dir,a,speed,ext_on,ext_off)
{
this.open_only_one = true;//這組menu在任何時刻是否只有一個在開啟,true/false
this.dir = dir;//menu組的公共方向,既然是一組menu它們應(yīng)該有相同的方向吧?
this.a =a;//menu公共加速度
this.speed =speed;//公共速度
this.ext_on = ext_on;//公共擴(kuò)展打開函數(shù)調(diào)用
this.ext_off = ext_off;//公共的擴(kuò)展收起函數(shù)調(diào)用
this.menu_item = new Array();//menu組
this._openning;//如果只允許打開一個菜單,這個就會記錄當(dāng)前打開的菜單
this.open_all = function()//
{
};
this.add = function (head,body)//添加menu的函數(shù)
{
var temp = new Menu(head,body,this.dir,this.speed,this.ext_on,this.ext_off);
this.menu_item.push(temp);
};
this.init = function ()//Navbar的初始化函數(shù),必須在add完成后調(diào)用
{
if(this.open_only_one == true)
{//如果只允許一個打開,那么僅僅設(shè)置菜單組的第一個菜單為打開狀態(tài)
if (this.menu_item.length>0)
{
with(this.menu_item[0])
{
init_state = true;
_parent = this;//設(shè)置menu的父親為這個Navbar
_parent_control = true;//設(shè)置父親來控制菜單
init();
}
this._openning = this.menu_item[0];
}
for(var i = 1; i<this.menu_item.length;i++)
{//設(shè)置出第一個外的其他菜單為關(guān)閉,同時設(shè)置好其他參數(shù)
with(this.menu_item[i])
{
init_state = false;
_parent = this;
init();
_parent_control = true;
}
}
}
else
{//如果open_only_one == false 那么僅僅初始化菜單
for(var i = 0;i<this.menu_item.length;i++)
{
this.menu_item.init();
}
}
};
//額外添加的父親控制函數(shù)
this._control = function(child)
{
var self =child;
Interval.clear(self._interval);
if (self._last_state == false)
{
if (typeof(self._parent._openning) == 'object')
{
self._parent._openning._off();
self._parent._openning = self;
}
self._on();
return false;
}
else
{
//self._off();
return false;
}
}
}//Navbar類結(jié)束
//===============================interval 處理=============================
//注意:_stack 只有20個
//擴(kuò)充時必須賦初值1-n
Interval=
{
length:20,
_action : new Array(length),
_stack : new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19),
_interval : Array(length),
_timeout: new Array(length),
//for(var i=0;i<_action.length;i++)stack.push(i);,
set:function(action_function,speed,time_out)
{
time_out = time_out?time_out:15000;//默認(rèn)的interval超時為15000秒,如果不需要設(shè)置超時,那么將下面的setTimeout 那移行注釋掉;
var p = Interval._stack.pop();
if(p)
{
Interval._action[p] = action_function;
Interval._interval[p]=setInterval('if(Interval._action['+p+'])Interval._action['+p+']();',speed);//這里的重復(fù)執(zhí)行函數(shù)不能寫成'Interval._action['+p+']'因?yàn)楹芸赡躀nterval.clear以后,還有一次沒有執(zhí)行完畢,于是就產(chǎn)生了一次錯誤
Interval._timeout[p] = setTimeout('Interval.clear('+p+')',time_out);//這行設(shè)置interval超時,如果不需要可注釋掉;
return p;
}
},
clear:function(p)
{
if (Interval._action[p])
{
clearInterval(Interval._interval[p]);
clearTimeout(Interval._timeout[p]);//這行清除interval超時,如果沒有設(shè)置超時可注釋掉;
Interval._action[p] = "";
Interval._stack.push(p);
}
}
}
//Interval 處理結(jié)束
更好的外觀:在菜單標(biāo)題上添加了圖標(biāo)。
更好的動作:實(shí)現(xiàn)了菜單的滑入,滑出效果。
更易的使用:添加了許多注釋,方便使用。
當(dāng)然還存在一些沒有發(fā)現(xiàn)的問題。盼望大家指教:)
實(shí)現(xiàn)折疊式動態(tài)改變style.height的值 這樣不是很專業(yè):) 不過很像了!
100%的原裝winXP折疊菜單的外觀!如果不一樣您提出來我改。
(qq2006 在點(diǎn)擊的時候還有一些抖動。)
先看圖最新添加了 qq2006 的外觀


測試網(wǎng)頁的地址:navbar.htm
詳細(xì)網(wǎng)址:http://lxbzj.com/showartical.asp?N_id=156
下載:http://lxbzj.com/upload/200604/menu.zip
新版本還在制作中。。。(更新的js在19層)
這里是2006-04-13日修改過的js
-不再需要在每一個<a>里面添加 onclick 和 onkeypress 了 這樣 網(wǎng)頁和js 進(jìn)一步的分離
-定義了一個menu類 負(fù)責(zé)將事件添加到每一個 菜單里面
-修改了onkeypress
-添加interval處理
-添加了一個收起的加速度(不過不是很明顯)
-添加了Navbar對象,實(shí)現(xiàn)在一組menu中只有一個能打開
-新js 不斷更新中。。。
+-navbar.js中的代碼:
復(fù)制代碼 代碼如下:
// JavaScript Document
/*========================================
* 文件名: navbar.js
* 編 碼: Utf-8
* 功 能:實(shí)現(xiàn)菜單折疊的javaScript
* 作 者:雷曉寶
* 版 本: 2.3
* 時 間:2006-03-07
===========================================*/
//========================定義menu類==================;
function Menu(head,child,dir,speed,init_state,ext_on,ext_off)
{
this.head = document.getElementById(head);//菜單頭
this.body = document.getElementById(child);//菜單體
this.direction = dir;//菜單收起的方向
this.speed = speed;//速度
this.ext_on = ext_on;//擴(kuò)展菜單展開調(diào)用
this.ext_off = ext_off;//擴(kuò)展菜單收起調(diào)用
this.init_state = init_state;//設(shè)置菜單的初始狀態(tài) true/false
this.a = 10;//加速度
//私用變量;
this._interval = false;
this._last_state = false;
this._size = false;
this._temp = false;
this._js = false;
this._div = false;
this._parent = false;
this._parent_control = false;
var self = this;
var temp = new Array(null,null);//temp[0]用來給_off()用,temp[1]用來給_on()用
//=============================方法=============================
//點(diǎn)擊事件處理
this.click = function(e)
{
if (self._parent_control)
{
self._parent._control(self);
return false;
}
else
{
Interval.clear(self._interval);
if (self._last_state == false)
{
self._on();
return false;
}
else
{
self._off();
return false;
}
}
}
//初始化
this.init = function()
{
this.head.onclick = this.click;
this.head.onkeypress = function(e)
{
e||(e=window.event);
if (!(e.keyCode ==32 || e.keyCode == 0))return;
//alert(':)');
self.click();
}
for(var i=0;i<this.body.childNodes.length;i++)
{
if (this.body.childNodes[i].nodeType==1)
{
this._div=this.body.childNodes[i];
break;
}
}
if (parseInt(this.body.style.height))//this.body.style.getPropertyCSSValue('height')this.body.currentStyle.height
{
this._size = parseInt(this.body.style.height);
}
else
{
this._size = this._div.offsetHeight;
}
switch (this.init_state)
{
case true:
if (this.body.style.display == 'none')
{
//this._last_state = false;
this._on();
}
else
{
this._last_state = true;
}
break;
default://case false:
if (this.body.style.display !='none')
{
this._last_state = true;
this._off();
}
break;
}
}
//展開菜單
this._on = function()
{
if (self._last_state == false)
{
self._last_state = true;
self.body.style.display="";
temp[1] = self.a?2*parseInt(Math.sqrt(self.a*self._size))+1:self._size/5;
if (isNaN(parseInt(self.body.style.height)))self.body.style.height="0px";
if (self.ext_on)
{
self.ext_on(self.head,self.body)
}
self._interval = Interval.set(self._action_on,speed);
}
//setTimeout('slowon("'+self.body.id+'")',5)
}
//收起菜單
this._off = function()
{
if (self._last_state == true)
{
self._last_state = false;
//if (temp[0] == null)
//{
temp[0]=self.a?2*parseInt(Math.sqrt(self.a*self._size))+1:self._size/5;;
//}
if(isNaN(parseInt(self.body.style.height)))self.body.style.height = self._size+'px';
if (self.ext_off)
{
self.ext_off(self.head,self.body)
}
self._interval = Interval.set(self._action_off,this.speed);
}
}
//以下處理滑動
this._action_on = function()
{
if (parseInt(self.body.style.height)+temp[1]>self._size)
{
self.body.style.height = self._size+'px';
Interval.clear(self._interval);
}
else
{
self.body.style.height = parseInt(self.body.style.height)+temp[1]+'px';
temp[1] +=self.a;
}
}
this._action_off = function()
{
if(parseInt(self.body.style.height)-temp[0]<0)
{
Interval.clear(self._interval);
self.body.style.display = "none";
}
else
{
self.body.style.height = parseInt(self.body.style.height)-temp[0]+'px';
temp[0]-=self.a;
}
}
}
//meanu類結(jié)束
//====================定義Navbar類,用來管理一組menu集合===============================
function navbar(dir,a,speed,ext_on,ext_off)
{
this.open_only_one = true;//這組menu在任何時刻是否只有一個在開啟,true/false
this.dir = dir;//menu組的公共方向,既然是一組menu它們應(yīng)該有相同的方向吧?
this.a =a;//menu公共加速度
this.speed =speed;//公共速度
this.ext_on = ext_on;//公共擴(kuò)展打開函數(shù)調(diào)用
this.ext_off = ext_off;//公共的擴(kuò)展收起函數(shù)調(diào)用
this.menu_item = new Array();//menu組
this._openning;//如果只允許打開一個菜單,這個就會記錄當(dāng)前打開的菜單
this.open_all = function()//
{
};
this.add = function (head,body)//添加menu的函數(shù)
{
var temp = new Menu(head,body,this.dir,this.speed,this.ext_on,this.ext_off);
this.menu_item.push(temp);
};
this.init = function ()//Navbar的初始化函數(shù),必須在add完成后調(diào)用
{
if(this.open_only_one == true)
{//如果只允許一個打開,那么僅僅設(shè)置菜單組的第一個菜單為打開狀態(tài)
if (this.menu_item.length>0)
{
with(this.menu_item[0])
{
init_state = true;
_parent = this;//設(shè)置menu的父親為這個Navbar
_parent_control = true;//設(shè)置父親來控制菜單
init();
}
this._openning = this.menu_item[0];
}
for(var i = 1; i<this.menu_item.length;i++)
{//設(shè)置出第一個外的其他菜單為關(guān)閉,同時設(shè)置好其他參數(shù)
with(this.menu_item[i])
{
init_state = false;
_parent = this;
init();
_parent_control = true;
}
}
}
else
{//如果open_only_one == false 那么僅僅初始化菜單
for(var i = 0;i<this.menu_item.length;i++)
{
this.menu_item.init();
}
}
};
//額外添加的父親控制函數(shù)
this._control = function(child)
{
var self =child;
Interval.clear(self._interval);
if (self._last_state == false)
{
if (typeof(self._parent._openning) == 'object')
{
self._parent._openning._off();
self._parent._openning = self;
}
self._on();
return false;
}
else
{
//self._off();
return false;
}
}
}//Navbar類結(jié)束
//===============================interval 處理=============================
//注意:_stack 只有20個
//擴(kuò)充時必須賦初值1-n
Interval=
{
length:20,
_action : new Array(length),
_stack : new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19),
_interval : Array(length),
_timeout: new Array(length),
//for(var i=0;i<_action.length;i++)stack.push(i);,
set:function(action_function,speed,time_out)
{
time_out = time_out?time_out:15000;//默認(rèn)的interval超時為15000秒,如果不需要設(shè)置超時,那么將下面的setTimeout 那移行注釋掉;
var p = Interval._stack.pop();
if(p)
{
Interval._action[p] = action_function;
Interval._interval[p]=setInterval('if(Interval._action['+p+'])Interval._action['+p+']();',speed);//這里的重復(fù)執(zhí)行函數(shù)不能寫成'Interval._action['+p+']'因?yàn)楹芸赡躀nterval.clear以后,還有一次沒有執(zhí)行完畢,于是就產(chǎn)生了一次錯誤
Interval._timeout[p] = setTimeout('Interval.clear('+p+')',time_out);//這行設(shè)置interval超時,如果不需要可注釋掉;
return p;
}
},
clear:function(p)
{
if (Interval._action[p])
{
clearInterval(Interval._interval[p]);
clearTimeout(Interval._timeout[p]);//這行清除interval超時,如果沒有設(shè)置超時可注釋掉;
Interval._action[p] = "";
Interval._stack.push(p);
}
}
}
//Interval 處理結(jié)束
相關(guān)文章
Bootstrap實(shí)現(xiàn)提示框和彈出框效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)彈出框和提示框效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01WebRTC媒體權(quán)限申請getUserMedia實(shí)例詳解
這篇文章主要為大家介紹了WebRTC媒體權(quán)限申請getUserMedia實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11js動態(tài)創(chuàng)建表格,刪除行列的小例子
這篇文章介紹了js動態(tài)創(chuàng)建表格,刪除行列的實(shí)例代碼,有需要的朋友可以參考一下2013-07-07js獲取iframe中的window對象的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S獲得iframe中的window對象的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05javascript實(shí)現(xiàn)鼠標(biāo)拖尾特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)鼠標(biāo)拖尾特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09JavaScript實(shí)現(xiàn)給對象添加一個只讀屬性
這篇文章主要為大家介紹了JavaScript如何給對象加一個只讀屬性,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06JavaScript實(shí)現(xiàn)簡易QQ聊天界面
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡易QQ聊天界面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07es6中class類靜態(tài)方法,靜態(tài)屬性,實(shí)例屬性,實(shí)例方法的理解與應(yīng)用分析
這篇文章主要介紹了es6中class類靜態(tài)方法,靜態(tài)屬性,實(shí)例屬性,實(shí)例方法的理解與應(yīng)用,結(jié)合實(shí)例形式分析了es6 class類靜態(tài)方法,靜態(tài)屬性,實(shí)例屬性,實(shí)例方法相關(guān)概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02