`
djob2008
  • 浏览: 126830 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Javascript滑动菜单(一)

阅读更多

转载:http://www.pin5i.com/showtopic-20077.html

一、开篇

在研究CS08的时候,看到后台管理的Dashboard滑动按钮做得很漂亮,于是自己就动手写了一个,在这里与 大家分享。菜单 展开可以是鼠标点击按钮,也可以是鼠标移动到按钮 上,在这里先介绍鼠标点击的这种菜单。

二、原理





基 本原理很简单,就是将需要滑动的菜单放在一个overflow为hidden的容器里,然后控制菜单相对于容器的top属性,实现下拉的效果。

但 是实际上也没这么简单,因为要遇到很多问题,比如容器的大小如何控制、容器如何确定位置、容器应该何时出现(如果容器一直存在,则会挡住容器下面的元 素)。这些问题是怎么解决的,在下一部分的代码里会有注释说明。在这里说明一下大概的原理:

1、首先在页面载入时,要给菜单加上一个外 框,就是上图中的menuContainer,这个框的作用就是遮挡menu。页面载入后,让menu的visibility为hidden,这时用户看 不到菜单,但是我们可以获得menu的长和宽,将这个值赋给menuContainer的长和宽(此时menuContainer的display为 block,要不然根本就没法赋值),然后将menuContainer的display设置为none。



2、当鼠标点 击按钮时,根据按钮的位置来确定下拉菜单的位置,将menuContainer的display设置为block后,就可以控制menu的top属性 (menu的position为absolute)实现滑动。



3、在滑动的过程当中,不能有按钮的事件或者 document关于菜单的事件被注册,这样会影响滑动的过程。所以滑动之前删除注册,滑动结束过后重新注册事件。




4、 当菜单展开的时候,点击按钮时菜单会收回,这里巧妙的用到了事件的冒泡。菜单展开的时候,根据if(isOpened)return;这一句来看,就像点 击按钮不起作用一样,点击按钮的事件会冒泡到document,而此时document恰好注册有关闭菜单的方法,从而实现了再次点击按钮关闭菜单的目 的。


三、代码


注意:这里用到了关于事件的一个简单框架 和几个其他函数,具体的可以下载示例后看源文件。 也可以看我之前写的博客文章进行了解。

function SlideMenu(oBtn,oMenu){
    var btn = oBtn;
    var menu = oMenu;
    var isOpened = false;
    //为下拉菜单添加外框
    var menuContainer = document.createElement("div");
    menu = menu.parentNode.removeChild(menu);
    menuContainer.appendChild(menu);
    document.body.appendChild(menuContainer);
    
    //设置外框必要的样式
    menuContainer.style.display = 'block';
    menuContainer.style.visibility = 'visible';
    menuContainer.style.overflow = 'hidden';
    menuContainer.style.position = 'absolute';
    
    // 设置下拉菜单的样式
    menu.style.position = 'absolute';
    menu.style.overflow = 'visible';
    menu.style.display = 'block';
    menu.style.visibility = 'hidden';// 用户既看不到下拉菜单 又可以获取菜单的宽和高
    // 获得下拉菜单的宽和高
    var menuWidth = menu.offsetWidth;
    var menuHeight = menu.offsetHeight;
    
    //设置下拉菜单容器的宽和高
    menuContainer.style.width = menuWidth;
    menuContainer.style.height = menuHeight;
    
    // 将下拉菜单容器隐藏
    menuContainer.style.display = 'none';
    
    var btnClick = function(){
        // 如果已经是展开的话 就不做响应
        // 而是通过事件冒泡转交给document的click处理
        // 这是会关闭菜单
        if(isOpened)
            return;
        // 如果正在展开的过程中 又点击了按钮的话 就会响应很多次
        // 这样就可以限制在展开的过程当中多次点击按钮
        btn.onclick = null;
        // 将下拉容器设置为可见 此时下拉菜单为display:block;visibility:hidden;
        menuContainer.style.display = 'block';
        
        // 设置下拉容器的位置
        var pos = GetPosition(btn);
        menuContainer.style.left = pos.x + 'px';
        menuContainer.style.top = (pos.y + btn.offsetHeight) + 'px';
        
        // 设置下拉菜单的属性
        menu.style.left = '0px';
        menu.style.top = -menuHeight + 'px';
        menu.style.visibility = 'visible';
        
        BufferMove('document.getElementById("' + menu.id + '").style.top',-menuHeight,0,30,1,fnCallback);
        function fnCallback(){
            oEventUtil.addEventHandler(document,"click",docClick);
            btn.onclick = btnClick;
            isOpened = true;
        }
    }
    btn.onclick = btnClick;
    var docClick = function(){
        oEvent  = oEventUtil.getEvent();
        //防止右键点击
        if(oEvent.button == 2)
            return;
        oEventUtil.removeEventHandler(document,"click",docClick);
        BufferMove('document.getElementById("' + menu.id + '").style.top',0,-menuHeight,30,1,fnCallback);
        function fnCallback(){
            menuContainer.style.display = 'none';
            isOpened = false;
        }
    }
}

 这是菜单类的主要代码,下面是使用方法

window.onload = function(){
    new SlideMenu($("btn1"),$("menu1"));
}

 即在实例化时传入两个对象到构造函数,前一个参数是菜单按钮对象,后一个参数是需要展开的菜单的对象。




Javascript滑动菜单(二)


一、开篇

上 一篇 中介绍了鼠标点击然后弹出菜单 的滑动菜单,这一篇介绍鼠标移动弹出菜单的滑动效 果。个人认为鼠标移动的这种滑动菜单更复杂一些。

二、原理


再次引用上一篇的图





这 种菜单和鼠标点击的菜单又有很大的不一样了,下面说一下我这种菜单是如何工作的:

1、首先滑动这种效果的基本原理在上一篇已经详细说明 了,在这里就不多说了;


2、将按钮和菜单以及他们的所有子元素都添加一个menugroup的Attribute,以便和其他元 素区别。并且给这些元素还要绑定mouseover和mouseout事件。这些事件的绑定主要是为了让鼠标移出菜单时菜单不马上收回,而是要有一个时延 才收回,在收回之前移入菜单那么菜单就不会收回了。总的思路是:凡是鼠标移入menugroup,就不需要时延关闭了。凡是移出menugroup时,则 开始时延关闭。


3、还要给按钮单独再添加一个mouseover的事件绑定,主要是用于弹出菜单。


三、 代码


注意:这里用到了关于事件的一个简单框架 和几个其他函数,具体的可以下载示例后看源文件。 也可以看我之前写的博客文章进行了解。

SlideMenu

function SlideMenu(oBtn,oMenu,sMenuId){
    var btn = oBtn;
    var menu = oMenu;
    if(menu.id == '')
        menu.id = sMenuId;
    var menuGroup = sMenuId
    var isOpened = false;
    var timeOutId = null;
    //为下拉菜单添加外框
    var menuContainer = document.createElement("div");
    menu = menu.parentNode.removeChild(menu);
    menuContainer.appendChild(menu);
    document.body.appendChild(menuContainer);
    
    //设置外框必要的样式
    menuContainer.style.display = 'block';
    menuContainer.style.visibility = 'visible';
    menuContainer.style.overflow = 'hidden';
    menuContainer.style.position = 'absolute';
    
    // 设置下拉菜单的样式
    menu.style.position = 'absolute';
    menu.style.overflow = 'visible';
    menu.style.display = 'block';
    menu.style.visibility = 'hidden';// 用户既看不到下拉菜单 又可以获取菜单的宽和高
    // 获得下拉菜单的宽和高
    var menuWidth = menu.offsetWidth;
    var menuHeight = menu.offsetHeight;
    
    //设置下拉菜单容器的宽和高
    menuContainer.style.width = menuWidth;
    menuContainer.style.height = menuHeight;
    
    //关闭菜单
    function CloseMenu(){
        if(!isOpened)
            return;
        BufferMove('document.getElementById("' + menu.id + '").style.top',0,-menuHeight,30,1,fnCallback);
        function fnCallback(){
            menuContainer.style.display = 'none';
            isOpened = false;
            oEventUtil.addEventHandler(btn,"mouseover",btnMouseOver);
        }
    }
    //凡是属于这个group的都有
    function GroupMouseOver(){
        clearTimeout(timeOutId);
        timeOutId = null;
    }
    function GroupMouseOut(){
        oEvent = oEventUtil.getEvent();
        if(oEvent.relatedTarget.getAttribute("menugroup") != menuGroup && timeOutId == null)
            timeOutId = setTimeout(CloseMenu,500);
    }
    //设置下拉菜单的group
    function SetGroup(obj){
        obj.setAttribute("menugroup",menuGroup);
        oEventUtil.addEventHandler(obj,"mouseover",GroupMouseOver);
        oEventUtil.addEventHandler(obj,"mouseout",GroupMouseOut);
        for(var i=0;i<obj.childNodes.length;i++){
            if(obj.childNodes.nodeName != "#text")
                SetGroup(obj.childNodes);
        }
    }
    SetGroup(btn);
    SetGroup(menu);
    
    // 将下拉菜单容器隐藏
    menuContainer.style.display = 'none';
    
    
    var btnMouseOver = function(){
        // 如果已经是展开的话 就不做响应
        if(isOpened)
            return;
        // 如果正在展开的过程中 又将鼠标移到btn上的话 就会响应很多次
        // 这样就可以限制在展开的过程当中多次响应mouseover
        oEventUtil.removeEventHandler(btn,"mouseover",btnMouseOver);
        // 将下拉容器设置为可见 此时下拉菜单为display:block;visibility:hidden;
        menuContainer.style.display = 'block';
        
        // 设置下拉容器的位置
        var pos = GetPosition(btn);
        menuContainer.style.left = pos.x + 'px';
        menuContainer.style.top = (pos.y + btn.offsetHeight) + 'px';
        
        // 设置下拉菜单的属性
        menu.style.left = '0px';
        menu.style.top = -menuHeight + 'px';
        menu.style.visibility = 'visible';
        
        BufferMove('document.getElementById("' + menu.id + '").style.top',-menuHeight,0,30,1,fnCallback);
        function fnCallback(){
            isOpened = true;
        }
    }
    oEventUtil.addEventHandler(btn,"mouseover",btnMouseOver);
}

 

复制代码

使用方 法如下:

window.onload = function(){
    new SlideMenu($("btn1"),$("menu1"),"menu1");
}

 

复制代码

第一个参 数是按钮对象,第二个参数是菜单对象,第三个参数是menugroup的字符串,在同一页面内要唯一。



分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics