最近写了个pc后台的一个可折叠/关闭的导航条,和写代码的编辑器有点像,先来看看效果:

    pc后台可折叠/关闭导航面板

    主要功能&使用

    现在很多后台模版都是左边菜单栏,右边内容栏,但是点击多个菜单后内容无法快速切换,这个功能主要是为了解决这个痛点。

    该导航条可以增加/删除,移动,折叠/展开,右键(刷新/关闭所有),设置默认页,自动适配等功能。

    使用的话很简单,这里已经给你写好了js和css,在页面上引用这两个就好了,不过这个js需要jquery的支持,因此你要先引用jquery:

    因为这里的拖动效果引用了jquery-ui,因此你还要引用jquery-ui.js。

    具体的使用也很简单,下面的代码基本上包括了创建和方法的调用:

    1. var navContentInstance = new navContentManage($('#container'));//初始化实例
    2. navContentInstance.setDefault('./iframe/welcome.html');//设置默认显示页
    3. $('#menu').on('click', function(ev) {
    4.     var _href = $(ev.target).closest('li').attr('_href'),
    5.     name = $(ev.target).closest('li').text();
    6.     navContentInstance.add(name, _href);//增加导航条和面板路径
    7. });
    8. window.onresize = debounce(function() {
    9.     navContentInstance.resizeWidth($('#container').outerWidth());//重新设置宽度
    10. }, 100);

    主要逻辑&难点

    整个功能还算比较简单,稍微复杂一点的就是折叠/展开的算法,就是当宽度不够的时候,隐藏哪个比较好?

    当然我这里实现的比较简单,就是给每个导航条增加一个open属性,表示打开的时间,open越大,表示最近打开,open越小,表示打开的时间比较小。当要隐藏导航条的时候,优先隐藏open小的,恢复导航条的时候则是优先恢复open大的。

    回到顶部
    我要评论

    所有评论

      相关文章