Bootstrap 3 - Разборная правая панель, например, Google Дисок, подробности / панель действий

Question

Работаем над новым веб-макетом для нашего существующего продукта. Нам бы хотелось, чтобы интегрированные дисплеи группового чата и канала активности отображались в правой части каждой страницы. Мы используем Bootstrap 3, и у меня есть макет, который выглядит довольно хорошо. Я использую ванильные стили Bootstrap с 12 столбцами, чтобы сделать это:

Теперь мы хотим позволить пользователям свернуть эту правую панель (по горизонтали), особенно для представлений, где важна горизонтальная недвижимость (виды сетки и т. Д.).

Есть ли способ Bootstrap сделать это? Я в порядке с виджетом вертикального сплиттера, или кнопкой переключения в верхней навигационной панели, или любым другим представлением, имеющим смысл. Это больше размер сетки, что мне нужен совет.

Answer 1

Мне нужен был похожий подход к одному из наших проектов, и полноэкранный просмотр здесь.

Я немного изменил сценарий и макет, чтобы получить то, что вы пытаетесь достичь. здесь код и полный экран здесь. Я использовал 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, чтобы получить именно то, что вы хотели получить.

Answer 2

Я только что выполнил то, что, как мне кажется, нужно, добавив и удалив классы начальной загрузки в jquery. У меня есть кнопка с идентификатором 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;} и скрипка. Я использовал хз в скрипке из-за маленького окна. но работает так же.

Answer 3

Я использовал плагин макета для 2 проектов, это мне очень помогло, оно дает вам полный контроль. моя ситуация требовала как слева, так и справа, а также снизу. ссылка есть,

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

я также использую bootstrap3, и будьте мудры при использовании bootstrap modle make shur, чтобы добавить этот код вскоре после тега body

Удачного кодирования.