Bootstrap 3 - 可折叠的右侧面板（如Google云端硬盘详细信息/活动面板） [英] Bootstrap 3 - Collapsible right-side panel like Google Drive Details/Activity panel

问题描述

使用我们现有产品的新网络布局。我们希望集成的团队聊天和活动供稿显示能够始终显示在每个页面的右侧。我们使用Bootstrap 3，我有一个看起来不错的模拟器。我使用的是Bootstrap 12列的大小调整样式：

Working on a new web layout for our existing product. We'd like the integrated team chat and activity feed displays to be consistently displayed on the right side of each page. We're using Bootstrap 3 and I've got a mock that looks pretty good. I'm using vanilla Bootstrap 12-column sizing styles to do this:

现在我们要允许用户折叠右侧面板（水平）水平房地产是重要的（网格视图等）。

Now we want to allow users to collapse that right-side panel (horizontally), especially for views where horizontal real estate is important (grid views, etc.).

有Bootstrap方法吗？我很好用垂直分隔符小部件，或在顶部导航中的切换按钮，或任何其他演示文稿是有意义的。

Is there a Bootstrap way to do this? I'm fine with a vertical splitter widget, or a toggle button in the top nav, or whatever other presentation makes sense. It's more the grid sizing that I need advice on.

推荐答案

我需要一个类似的方法，我们的一个项目和全屏视图是这里。

I had needed a similar approach to one of our projects and fullscreen view is here.

我修改了脚本和布局有点得到你想要实现的。 此处是代码，全屏是这里。我使用jquery cookie保持视图状态，即使在页面刷新后。点击 Cog图标将切换侧边栏。脚本是：

I modified the script and layout a bit to get what you trying to achieve. here is the code and fullscreen is here. I used jquery cookie to retain the view state even after page refresh. Clicking on the Cog Icon will toggle the sidebar. The script is:

    $(function () {
        var $menu = $('#sidebar-wrapper');
        var $content = $('#main-wrapper');
        if ($.cookie('offcanvas') == 'hide') {
            $content.addClass('no-transition');
            $menu.hide();
            $menu.css('right', -($menu.outerWidth() + 10));
            $content.removeClass('col-md-10').addClass('col-md-12');
        }
        else if ($.cookie('offcanvas') == 'show') {
            $menu.show(500).animate({ right: 0 });
            //  $menu.show();
            $content.removeClass('no-transition');
            $content.removeClass('col-md-12').addClass('col-md-10');
        }


        $('.toggle-button').click(function () {
            $content.removeClass('no-transition');
            if ($menu.is(':visible') && $content.hasClass('col-md-10')) {
                // Slide out
                $menu.animate({
                    right: -($menu.outerWidth() + 10)
                }, function () {
                    $menu.hide(1000);
                });
                $content.removeClass('col-md-10').addClass('col-md-12');
                $.cookie('offcanvas', 'hide');
            }
            else {
                // Slide in
                $menu.show(500).animate({ right: 0 });
                $content.removeClass('col-md-12').addClass('col-md-10');
                $.cookie('offcanvas', 'show');
            }
            if ($content.hasClass('col-md-12') && $menu.is(':hidden')) {
                $menu.animate({
                    right: 0
                }, function () {
                    $menu.show(1000);
                });
                //  $menu.show();
                $content.removeClass('no-transition');
                $content.removeClass('col-md-12').addClass('col-md-10');
            }
        });
        $('.bs-tooltip').tooltip();
    });

您可以自定义布局/ css以获得您想要的内容。

You can customize the layout/css to get what exactly you wanted to get.

这篇关于Bootstrap 3 - 可折叠的右侧面板（如Google云端硬盘详细信息/活动面板）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！