【问题标题】:Bootstrap 3 - Collapsible right-side panel like Google Drive Details/Activity panelBootstrap 3 - 可折叠的右侧面板,如 Google Drive Details/Activity 面板
【发布时间】:2014-05-22 00:31:45
【问题描述】:

为我们现有的产品设计新的网页布局。我们希望集成的团队聊天和活动提要显示始终显示在每个页面的右侧。我们正在使用 Bootstrap 3,我有一个看起来不错的模拟。我正在使用 vanilla Bootstrap 12 列大小调整样式来执行此操作:

现在我们希望允许用户折叠右侧面板(水平),尤其是对于水平空间很重要的视图(网格视图等)。

有没有引导方法来做到这一点?我可以使用垂直拆分器小部件,或顶部导航中的切换按钮,或任何其他有意义的演示。我需要更多关于网格大小的建议。

【问题讨论】:

  • 你看过画布外的例子吗? getbootstrap.com/examples/offcanvas
  • 谢谢。我刚才看了一下,它很接近,但我希望扩展部分压缩主显示区域,而不是将其滑出页面。

标签: jquery html css twitter-bootstrap-3


【解决方案1】:

我刚刚完成了我认为您想要的 jquery 添加和删除引导类。我有一个 ID 为 collapse 的按钮,单击它会检查侧边栏是否打开并更改布局。 标记:

<div class="container">
    <div class="row">
        <div class="row">
            <div class="col-md-12"><button class="btn-primary btn-large btn" id="collapse">Collapse sidebar</button></div>
        </div>
        <div class="row">
            <div class="col-md-8" id="content" style="height:400px;border:2px solid black">Hello, I'm a 3/4 width Div.</div>
            <div class="col-md-4 open" id="sidebar"  style="height:400px;border:2px solid blue">Hey There, I'm a 1/4 width Div</div>
        </div>
    </div>
</div>

jQuery:

$('#collapse').click(function(){
    if($('#sidebar').hasClass('open'))
    {
        $('#sidebar').removeClass('col-md-4');
        $('#sidebar').removeClass('open');
        $('#sidebar').addClass('hidden');
        $('#content').addClass('col-md-12');
        $('#content').removeClass('col-md-8');
    }
    else
    {
        $('#sidebar').addClass('col-md-4');
        $('#sidebar').addClass('open');
        $('#sidebar').removeClass('hidden');
        $('#content').removeClass('col-md-12');
        $('#content').addClass('col-md-8');
    }
});

我唯一拥有的 css 是一个隐藏类 .hidden{display:none;}fiddle.,由于窗口很小,我在小提琴中使用了 xs。但工作原理相同。

【讨论】:

  • 是的,它有效,但我真的在寻找一些具有缓动/滑动效果的东西,以与我们的其他模拟保持一致。
【解决方案2】:

我在 2 个项目中使用了布局插件,这对我帮助很大,它可以让您完全控制。我的情况也需要左右和底部。链接是,

http://layout.jquery-dev.net/

我也使用 bootstrap3 并且在使用 bootstrap 模块时要明智,让 shur 在 body 标记后立即放置该代码

编码愉快。

【讨论】:

    【解决方案3】:

    我需要一种类似的方法来处理我们的一个项目,全屏视图是here

    我稍微修改了脚本和布局以获得您想要实现的目标。 here 是代码,全屏是 here。即使在页面刷新后,我也使用 jquery cookie 来保留视图状态。单击 Cog 图标 将切换侧边栏。脚本是:

        $(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 以获得您想要的内容。

    【讨论】:

    • 这正是我的想法。我将布局和动画翻转到右侧,它应该是完美的。
    • 我的错,标记了答案但没有点击赏金!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-02-28
    • 1970-01-01
    • 1970-01-01
    • 2016-08-23
    • 2015-11-25
    • 1970-01-01
    • 2017-02-01
    相关资源
    最近更新 更多