AdminLTE crollato scatole di default

AdminLTE si basa su Bootstrap: https://github.com/almasaeed2010/AdminLTE AdminLTE crollato scatole di default

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

Ma io sono sicuri di come fare le scatole schiacciabili compresso per impostazione predefinita.

Sto assumendo poiché è basato su Bootstrap, questo dovrebbe essere piuttosto semplice. Ho provato altre implementazioni come impostare l'id su "collapsedOne" e tentare di trattare i div come fisarmoniche, ma senza successo.

Sulla AdminLTE/app.js ~ riga 45 c'è un codice che implementa la diapositiva su/giù per ridurre le finestre. Idealmente, quello che vorremmo è avere le caselle nello stato "slide up" per impostazione predefinita con la classe "collapsed-box" in modo che quando l'icona viene cliccata, esegue "slide down".

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

Qualche suggerimento?

Grazie in anticipo.

fonte

2014-07-20 Anonymous

$("[data-widget='collapse']").click() Aggiungi che a un file JavaScript che viene eseguito in fondo

fonte

2014-07-20 14:59:03 smistry

ho aggiornato il problema con una modifica. Chiamare il semplice "collasso" non funziona. –

Vedere nuova risposta aggiornata – smistry

Capisco che questo comprima le mie scatole dopo il caricamento della pagina, tuttavia vorrei che le scatole venissero compresse di default. –

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

e utilizzare nella sezione div

fonte

2014-09-08 12:00:42 jaqb

Quando la pagina viene caricata nel suo stato iniziale, perché non basta aggiungere la classe collapsed-box a elemento di scatola?

Il sotto renderà nello stato e la funzione crollato senza AdminLTE modificare:

 

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

fonte

2014-09-12 22:15:20 user4036441

Ma come gestire i segnali più e meno, @ user4036441? Con questa soluzione la scatola viene compressa quando la pagina viene caricata, ma il segnale che vediamo è il segnale meno. –

@AloysiadeArgenteuil cambia semplicemente l'icona in '' 'fa-plus''' anziché' '' fa-minus'''. Questa è l'icona iniziale, il javascript di AdminLTE dovrebbe gestire l'inversione dopo. – gligoran

Ecco i passaggi:

cambiare l'icona negativo a positivo.
Add "display: none" esplicito stile di box-corpo
Aggiungere la classe "crollato-box" per la casella

fonte

2015-01-25 11:31:01 user2649102

I corretti passaggi testate che ha lavorato per me sono:

Aggiungi "display: none" stile esplicito alla scatola-corpo

Si è fatto :)

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

fonte

2015-07-02 11:48:20

Per coloro che utilizzano AdminLTE 2.1.1

semplicemente aggiungere sidebar-collapse classe sul <BODY>

Prima:

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

Dopo:

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

fonte

2015-07-14 01:11:18 brianlasta

non funziona per me –

per una specificare div

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

per tutti

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

fonte

2015-12-02 16:53:59 jtraslavi

Basta aggiungere "crollato-box" per la casella e modificare questa:

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

Questo dovrebbe funzionare per me

fonte

2016-01-25 10:16:55 maartenvr98

Una scatola aperta: <div class="box">

Una scatola è crollato: <div class="box collapsed-box">

e quindi modificare naturalmente l'icona sul pulsante

fonte

2016-01-28 07:33:01

ok grazie, questo funziona per me. –

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

fonte

2016-03-29 11:00:55

Ehi un po 'di 'html'! Avete qualche spiegazione o commento sul codice? – tmthydvnprt

Questo soluction ha funzionato per me:

ho aggiunto di classe "collasso-sinistra" per il menu e ha aggiunto la classe "strech" per il contenuto principale.

Io uso la versione 1 per AdminLTE. È diviso a parte class = "left-side" per il menu di sinistra e aside class = "right-side" per il contenuto principale.

Quindi, questo è il codice finale:

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

fonte

2017-06-19 21:22:19

ho aggiunto questo all'oggetto 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); 

     }); 

    }

e lo ha chiamato durante inizializzazione I:

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

fonte

2017-07-19 15:39:16

AdminLTE crollato scatole di default

risposta

Problemi correlati