AdminLTE boîtes réduites par défaut
AdminLTE est basé sur Bootstrap: https://github.com/almasaeed2010/AdminLTE
Aperçu en direct:http://almsaeedstudio.com/preview/
Mais je ne sais pas comment rendre les boîtes réductibles réduites par défaut.
Je suppose que depuis qu'il est construit sur Bootstrap, cela devrait être plutôt simple. J'ai essayé d'autres implémentations telles que définir l'identifiant sur "collapsedOne" et tenter de traiter les divs comme des accordéons, mais en vain.
Sur la ligne AdminLTE/app.js ~ 45, il y a du code qui implémente glisser vers le haut/glisser vers le bas pour réduire les zones. Idéalement, nous souhaitons que les boîtes soient dans l'état "glisser vers le haut" par défaut avec la classe "boîte effondrée" afin que, lorsque l'utilisateur clique sur l'icône, celle-ci s'exécute "glisser vers le bas".
/*
* 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();
}
});
Aucune suggestion?
Merci d'avance.
Lorsque la page se charge dans son état initial, pourquoi ne pas simplement ajouter l'élément collapsed-box class to box?
Les éléments ci-dessous s'afficheront dans l'état et la fonction réduits sans modifier AdminLTE:
<! - Zone par défaut -> <div class = "box-solid collapsed-box"> <div class = "box-header"> <h3 class = "box-title"> Boîte solide par défaut </ h3> <div class = "box-tools pull-right"> <button class = "btn btn-default btn-sm" data-widget = "collapse"> <i class = "fa-plus"> </ i> </ button> <button class = "btn btn-default btn-sm" data-widget = "remove"> <i class = "fa fa fois"> </ i> </ button>. </ div> </ div> <div style = "display: none;" class = "box-body"> Classe Box: <code> .box.box-solid </ code> <p> bla bla </ p> </ div> <! - /.box-body -> </ div> <! - /.box ->
$("[data-widget='collapse']").click() Ajouter cela à un fichier JavaScript qui s'exécute en bas
Voici les étapes:
- Modifiez l'icône moins en plus.
- Ajouter un style explicite "display: none" au box-body
- Ajouter la classe "collapsed-box" à la boîte
Pour ceux qui utilisent AdminLTE 2.1.1
ajoutez simplement la classe sidebar-collapse sur le <BODY>
Avant:
<body class="skin-blue sidebar-mini">
Après:
<body class="skin-blue sidebar-mini sidebar-collapse">
$("[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();
}
});
et utiliser dans la section div
Une boîte ouverte: <div class="box">
Une boîte réduite: <div class="box collapsed-box">
Et puis bien sûr changer l'icône sur le bouton
Ajoutez simplement "collapsed-box" à la boîte et changez ceci:
<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>
Cela devrait fonctionner pour moi
<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 -->
Cette solution a fonctionné pour moi:
J'ai ajouté la classe "collapse-left" pour le menu et la classe "strech" pour le contenu principal.
J'utilise la version 1 pour le AdminLTE. Il est divisé en apartement class = "left-side" pour le menu de gauche et apart class = "right-side" pour le contenu principal.
Donc, ceci est le code final:
<aside class="left-side collapse-left">
<!-- put the left menu here -->
</aside>
<aside class="right-side strech">
<!-- put the main content here -->
</aside>
pour un spécifiez div
$(function() { $('your-button-id').click(); })
pour tous
$(function() { $("[data-widget='collapse']").click(); })
J'ai ajouté ceci à l'objet 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);
});
}
et l'a appelé lors de l'initialisation:
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));
},
Les étapes testées correctes qui ont fonctionné pour moi sont:
- Ajouter un style explicite "display: none" au box-body
Vous avez terminé :)
<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>