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 相关文章推荐
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
js简单抽奖代码
Jan 16 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 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 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
python3调用windows dos命令的例子
2019/08/14 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
pytorch 常用线性函数详解
2020/01/15 Python
python列表的逆序遍历实现
2020/04/20 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
销售冠军获奖感言
2014/02/03 职场文书
小学母亲节活动方案
2014/03/14 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
商铺门前三包责任书
2014/07/25 职场文书
连锁超市项目计划书
2014/09/15 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
大学生暑假实习总结
2015/07/13 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL