AdminLTE сбрасывает поля по умолчанию

AdminLTE основан на Bootstrap: https://github.com/almasaeed2010/AdminLTE

Live Preview: http://almsaeedstudio.com/preview/

Но я не уверен, как по умолчанию сбросить сбрасываемые поля.

Я предполагаю, что, поскольку он построен на Bootstrap, это должно быть довольно простым. Я пробовал другие реализации, такие как установка id на "collapsedOne" и попытка обработать divs как аккордеоны, но безрезультатно.

В строке AdminLTE/app.js ~ 45 есть код, который реализует слайд вверх/слайд вниз, чтобы свернуть окна. В идеале, мы хотим, чтобы поля были в состоянии "слайд-вверх" по умолчанию с классом "свернутый-ящик", чтобы при щелчке по значку он выполнял "слайд вниз".

/*     
 * Add collapse and remove events to boxes
 */
$("[data-widget='collapse']").click(function() {
    //Find the box parent        
    var box = $(this).parents(".box").first();
    //Find the body and the footer
    var bf = box.find(".box-body, .box-footer");
    if (!box.hasClass("collapsed-box")) {
        box.addClass("collapsed-box");
        bf.slideUp();
    } else {
        box.removeClass("collapsed-box");
        bf.slideDown();
    }
});

Любые предложения?

Спасибо заранее.

Ответы

Ответ 1

Когда страница загружается в исходное состояние, почему бы просто не добавить класс collapsed-box в элемент box?

Ниже будет отображаться в сжатом состоянии и функции без изменения AdminLTE:

    <!-- Default box -->
    <div class="box box-solid collapsed-box">
        <div class="box-header">
            <h3 class="box-title">Default Solid Box</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-plus"></i></button>
                <button class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
        </div>
        <div style="display: none;" class="box-body">
            Box class: <code>.box.box-solid</code>
            <p>bla bla</p>
        </div><!-- /.box-body -->
    </div><!-- /.box -->

Ответ 2

Вот шаги:

Измените значок минуса на плюс.
Добавить явный стиль "display: none" в box-body
Добавьте класс "смятый ящик" в поле

Ответ 3

$("[data-widget='collapse']").click() Добавьте это в файл JavaScript, который работает внизу

Ответ 4

Для тех, кто использует AdminLTE 2.1.1

просто добавьте класс sidebar-collapse в <BODY>

До:

 <body class="skin-blue sidebar-mini">

После:

 <body class="skin-blue sidebar-mini sidebar-collapse">

Ответ 5

$("[data-widget='collapse']").click(function() {
    //Find the box parent........
    var box = $(this).parents(".box").first();
    //Find the body and the footer
    var bf = box.find(".box-body, .box-footer");
    if (!$(this).children().hasClass("fa-plus")) {.
        $(this).children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
        bf.slideUp();
    } else {
        //Convert plus into minus
        $(this).children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
        bf.slideDown();
    }
});

и использовать в разделе div

Ответ 6

Открытая коробка: <div class="box">

Коллапс: <div class="box collapsed-box">

И тогда, конечно, измените значок на кнопке

Ответ 7

Просто добавьте "коробление" в поле и измените это:

<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>

<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>

Это должно работать для меня

Ответ 8

Правильно протестированные Шаги, которые работали для меня:

Добавить явный стиль "display: none" в box-body

Вы закончили:)

        <div class="box ">
                    <div class="box-header with-border bg-yellow">
                      <h3 class="box-title">Box Title Here</h3>
                      <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                      </div>
                    </div><!-- /.box-header -->
                    <div class="box-body" style="display: none;">
                      <div class="table-responsive">

                            <!--Your content here -->

                      </div><!-- /.table-responsive -->
                    </div><!-- /.box-body -->

        </div>

Ответ 9

для одного укажите div

$(function() { $('your-button-id').click(); })

для всех

  $(function() { $("[data-widget='collapse']").click(); })

Ответ 10

<div class="box box-default collapsed-box">
  <div class="box-header with-border">
    <h3 class="box-title">Expandable</h3>
    <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</div><!-- /.box -->

Ответ 11

Это совпадение сработало для меня:

Я добавил класс "collapse-left" для меню и добавил класс "strech" для основного контента.

Я использую версию 1 для AdminLTE. Он разделен в сторону class= "слева" для левого меню и в стороне class= "правая сторона" для основного содержимого.

Итак, это окончательный код:

<aside class="left-side collapse-left"> 
    <!-- put the left menu here --> 
</aside>
<aside class="right-side strech"> 
    <!-- put the main content here -->
</aside>

Ответ 12

Я добавил это в объект boxWidget:

setInitialCollapseStatus: function (container) {
        var _this = this;
        var collapsedBoxes = container.find('.box.collapsed-box .btn-box-tool > i');

        collapsedBoxes.each(function (index) {
            var box = $(this);
            //Convert minus into plus
            box
                .removeClass(_this.icons.collapse)
                .addClass(_this.icons.open);

        });

    }

и вызвал его во время инициализации:

activate: function (_box) {
        var _this = this;
        if (!_box) {
            _box = document; // activate all boxes per default
        }
        //Listen for collapse event triggers
        $(_box).on('click', _this.selectors.collapse, function (e) {
            e.preventDefault();
            _this.collapse($(this));
        });

        //Listen for remove event triggers
        $(_box).on('click', _this.selectors.remove, function (e) {
            e.preventDefault();
            _this.remove($(this));
        });

        // Set initial collapseStatus
        _this.setInitialCollapseStatus($(_box));
    },