码迷,mamicode.com
首页 > 其他好文 > 详细

JGUI源码:Accordion折叠到侧边栏实现

时间:2019-02-26 23:52:06      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:体验   mamicode   obj   状态   each   ide   inf   return   操作   

折叠和非折叠效果如左右图所示
技术图片技术图片技术图片

代码如下

//折叠
$.fn.jAccordionfold = function() {
  return this.each(function() {
    var obj = $(this);
    obj.find(‘.jgui-accordion-navitem‘).siblings("dd").slideUp();
    obj.find(‘.jgui-accordion-navitem span‘).hide();
    obj.find(‘.jgui-accordion-navitem .jgui-accordion-navitem-more‘).hide();
  });
};
//展开
$.fn.jAccordionunfold = function() {
  return this.each(function() {
    var obj = $(this);
    obj.find(‘.jgui-accordion-navitem-more.expanded‘).closest(".jgui-accordion-navitem").siblings("dd").slideDown();
    obj.find(‘.jgui-accordion-navitem span‘).show();
    obj.find(‘.jgui-accordion-navitem .jgui-accordion-navitem-more‘).show();
  });
};

把所有展开的抽屉项折叠起来,再改变Accordion的宽度即可实现上图效果,收到侧边栏后,点击任意图标能够恢复到正常非折叠状态进行操作。

$(‘#folderbtn‘).click(function(event) {
    if($(‘#leftpanel‘).is(‘.unfold‘)){//未折叠
        $(‘#leftpanel‘).width(50);
        $(‘#centerpanel‘).css(‘left‘,‘50px‘);
        $(‘#mainlogo‘).html(‘J‘);
        $(‘#menuaccordion‘).jAccordionfold();
        
    }
    else{
        $(‘#leftpanel‘).width(300);
        $(‘#centerpanel‘).css(‘left‘,‘300px‘);
        $(‘#mainlogo‘).html(‘JGUI DEMO‘);
        $(‘#menuaccordion‘).jAccordionunfold();
    }
    $(‘#leftpanel‘).toggleClass(‘unfold‘);
    $(‘#folderbtn‘).toggleClass(‘icon-menu-unfold icon-menu-fold‘);
});
$("#menuaccordion .jgui-accordion-navitem").click(function(event) {
    if(!$(‘#leftpanel‘).is(‘.unfold‘)){
        $(‘#leftpanel‘).width(300);
        $(‘#centerpanel‘).css(‘left‘,‘300px‘);
        $(‘#mainlogo‘).html(‘JGUI DEMO‘);
        $(‘#menuaccordion‘).jAccordionunfold();
        $(‘#leftpanel‘).toggleClass(‘unfold‘);
        $(‘#folderbtn‘).toggleClass(‘icon-menu-unfold icon-menu-fold‘);
    }
  });

目前折叠起来的图标没有带tooltip或者菜单,如果有更好的用户体验,当鼠标放到折叠的菜单上时,应该显示一个tooltip或者菜单,这个将在以后实现。

 

JGUI源码:Accordion折叠到侧边栏实现

标签:体验   mamicode   obj   状态   each   ide   inf   return   操作   

原文地址:https://www.cnblogs.com/zhaogaojian/p/10440914.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!