XP折叠菜单&仿QQ2006菜单


Posted in Javascript onDecember 16, 2006

特性:

更好的外观:在菜单标题上添加了图标。
更好的动作:实现了菜单的滑入,滑出效果。
更易的使用:添加了许多注释,方便使用。

当然还存在一些没有发现的问题。盼望大家指教:)
实现折叠式动态改变style.height的值 这样不是很专业:) 不过很像了!

100%的原装winXP折叠菜单的外观!如果不一样您提出来我改。
(qq2006 在点击的时候还有一些抖动。)

先看图最新添加了 qq2006 的外观
XP折叠菜单&仿QQ2006菜单XP折叠菜单&仿QQ2006菜单
测试网页的地址:navbar.htm
详细网址:http://lxbzj.com/showartical.asp?N_id=156
下载:http://lxbzj.com/upload/200604/menu.zip
新版本还在制作中。。。(更新的js在19层)
这里是2006-04-13日修改过的js
-不再需要在每一个<a>里面添加 onclick 和 onkeypress 了 这样 网页和js 进一步的分离
-定义了一个menu类 负责将事件添加到每一个 菜单里面
-修改了onkeypress
-添加interval处理
-添加了一个收起的加速度(不过不是很明显)
-添加了Navbar对象,实现在一组menu中只有一个能打开
-新js 不断更新中。。。

+-navbar.js中的代码:

// JavaScript Document 
/*======================================== 
*        文件名:        navbar.js 
*        编  码: Utf-8 
*        功  能:实现菜单折叠的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;//扩展菜单展开调用 
    this.ext_off = ext_off;//扩展菜单收起调用 
    this.init_state = init_state;//设置菜单的初始状态 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()用 //=============================方法============================= 
//点击事件处理 
    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类结束 
//====================定义Navbar类,用来管理一组menu集合=============================== 
function navbar(dir,a,speed,ext_on,ext_off) 
{ 
    this.open_only_one = true;//这组menu在任何时刻是否只有一个在开启,true/false 
    this.dir = dir;//menu组的公共方向,既然是一组menu它们应该有相同的方向吧? 
    this.a =a;//menu公共加速度 
    this.speed =speed;//公共速度 
    this.ext_on = ext_on;//公共扩展打开函数调用 
    this.ext_off = ext_off;//公共的扩展收起函数调用 
    this.menu_item = new Array();//menu组 
    this._openning;//如果只允许打开一个菜单,这个就会记录当前打开的菜单 
    this.open_all = function()// 
    { 
    }; 
    this.add = function (head,body)//添加menu的函数 
    { 
        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的初始化函数,必须在add完成后调用 
    { 
        if(this.open_only_one == true) 
        {//如果只允许一个打开,那么仅仅设置菜单组的第一个菜单为打开状态 
            if (this.menu_item.length>0) 
            { 
                with(this.menu_item[0]) 
                { 
                    init_state = true; 
                    _parent = this;//设置menu的父亲为这个Navbar 
                    _parent_control = true;//设置父亲来控制菜单 
                    init(); 
                } 
                this._openning = this.menu_item[0]; 
            } 
            for(var i = 1; i<this.menu_item.length;i++) 
            {//设置出第一个外的其他菜单为关闭,同时设置好其他参数 
                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(); 
            } 
        } 
    }; 
//额外添加的父亲控制函数 
    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类结束 

//===============================interval 处理============================= 
//注意:_stack 只有20个 
//扩充时必须赋初值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;//默认的interval超时为15000秒,如果不需要设置超时,那么将下面的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);//这里的重复执行函数不能写成'Interval._action['+p+']'因为很可能Interval.clear以后,还有一次没有执行完毕,于是就产生了一次错误 
            Interval._timeout[p] = setTimeout('Interval.clear('+p+')',time_out);//这行设置interval超时,如果不需要可注释掉; 
            return p; 
        } 
    }, 
    clear:function(p) 
    { 
        if (Interval._action[p]) 
        { 
            clearInterval(Interval._interval[p]); 
            clearTimeout(Interval._timeout[p]);//这行清除interval超时,如果没有设置超时可注释掉; 
            Interval._action[p] = ""; 
            Interval._stack.push(p); 
        } 
    } 
} 
//Interval 处理结束
Javascript 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
vue.js 实现输入框动态添加功能
Jun 25 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
prototype 1.5相关知识及他人笔记
Dec 16 #Javascript
飞鱼(shqlsl) javascript作品集
Dec 16 #Javascript
XHTML-Strict 内允许出现的标签
Dec 11 #Javascript
JS的IE和Firefox兼容性集锦
Dec 11 #Javascript
不错的新闻标题颜色效果
Dec 10 #Javascript
用脚本调用样式的几种方法
Dec 09 #Javascript
用js计算页面执行时间的函数
Dec 07 #Javascript
You might like
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
显示、隐藏密码
2006/07/01 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
食品厂厂长岗位职责
2014/01/30 职场文书
小学班主任评语大全
2014/04/23 职场文书
支部鉴定材料
2014/06/02 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang
关于 Python json中load和loads区别
2021/11/07 Python