html - adminlte - box-body bootstrap

AdminLTE cajas colapsadas por defecto

Question

AdminLTE se basa en Bootstrap: https://github.com/almasaeed2010/AdminLTE

Vista previa en vivo: http://almsaeedstudio.com/preview/

Pero no estoy seguro de cómo hacer que los cuadros colapsables se colapsen de forma predeterminada.

Supongo que ya que está construido en Bootstrap, esto debería ser bastante sencillo. He intentado con otras implementaciones, como establecer el ID en "collapseedOne" y tratar de tratar a los divs como acordeones, pero fue en vano.

En la línea AdminLTE / app.js ~ 45 hay un código que implementa deslizar hacia arriba / deslizar hacia abajo para contraer cajas. Lo ideal sería que los cuadros estuvieran en el estado "deslizar hacia arriba" de forma predeterminada con la clase "cuadro colapsado" para que cuando se haga clic en el icono, se ejecute "deslice hacia abajo".

/*     
 * 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();
    }
});

¿Alguna sugerencia?

Gracias por adelantado.

Answer 1

Agregué esto al objeto 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);

        });

    }

y lo llamó durante la inicialización:

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));
    },

Answer 2

Aquí están los pasos:

1. Cambia el icono de menos a más.
2. Añadir estilo explícito "display: none" a box-body
3. Agregue la clase "caja colapsada" a la caja

Answer 3

Cuando la página se carga en su estado inicial, ¿por qué no simplemente agregar la clase de caja collapsed-box al elemento de caja?

Lo siguiente se representará en estado colapsado y funcionará sin modificar 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 -->

Answer 4

Esta solución me funcionó:

Agregué la clase "colapsar a la izquierda" para el menú y agregué la clase "strech" para el contenido principal.

Yo uso la versión 1 para el AdminLTE. Se divide en la clase aparte = "lado izquierdo" para el menú de la izquierda y aparte en la clase = "lado derecho" para el contenido principal.

Entonces, este es el código final:

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

Answer 5

Los pasos correctos probados que funcionaron para mí son:

1. Añadir estilo explícito "display: none" a box-body

2. Estás listo :)

           <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>

Answer 6

Para aquellos que están utilizando AdminLTE 2.1.1

simplemente agrega la clase sidebar-collapse en el <BODY>

Antes de:

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

Después:

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

Answer 7

Simplemente agregue "caja colapsada" a la caja y cambie esto:

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

a

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

Esto debería funcionar para mí

Answer 8

Una caja abierta: <div class="box">

Un cuadro colapsado: <div class="box collapsed-box">

Y luego, por supuesto, cambiar el icono en el botón.

Answer 9

por una div especificada

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

para todos

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

Answer 10

$("[data-widget=''collapse'']").click() Agregue eso a un archivo JavaScript que se ejecuta en la parte inferior

Answer 11

$("[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();
    }
});

y usar en la sección div

Answer 12

<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 -->