Les boîtes d'administration se sont effondrées par défaut
Admin est basé sur Bootstrap:https://github.com/almasaeed2010/AdminLTE
Aperçu En Direct:http://almsaeedstudio.com/preview/
mais je ne sais pas comment faire s'effondrer les boîtes pliables par défaut.
je suppose que puisqu'il est construit sur Bootstrap, cela devrait être assez simple. J'ai essayé d'autres implémentations comme configurer l'id pour "s'est effondré" et tenter de traiter le divs en accordéon, mais en vain.
On the Admin / app.js ~line 45 Il y a du code qui implémente des boîtes coulissantes vers le haut/coulissantes vers le bas. Idéalement, ce que nous voulons, c'est que les boîtes soient dans l'état "slide up" par défaut avec la classe "collapsed-box" de sorte que lorsque l'icône est cliquée, elle exécute "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();
}
});
des suggestions?
Merci d'avance.
12 réponses
lorsque la page se charge dans son état initial, pourquoi ne pas simplement ajouter le collapsed-box élément de classe à boîte?
Le ci-dessous s'affiche dans l'effondrement de l'état et de la fonction sans modifier 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 -->
$("[data-widget='collapse']").click() ajouter cela à un fichier JavaScript qui s'exécute en bas
Voici les étapes:
- changez l'icône moins en plus .
- ajouter le style explicite "display: none" à box-body
- ajouter la classe "collapsed-box" à la case
pour ceux qui utilisent AdminLTE 2.1.1
il suffit simplement d'ajouter sidebar-collapse classe <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 utilisation dans la section div
Une boîte ouverte:
<div class="box">
Un effondrement de la boîte:
<div class="box collapsed-box">
et puis bien sûr changer l'icône sur le bouton
il suffit d'ajouter "collapsed-box" à la boîte et de changer 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
La bonne testé les Étapes de ce qui a fonctionné pour moi sont :
- ajouter le style explicite "display: none" à box-body
c'est fait :)
<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>
pour spécifier un div
$(function() { $('your-button-id').click(); })
pour tout
$(function() { $("[data-widget='collapse']").click(); })
<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 ajouté la classe" strech " pour le contenu principal.
j'utilise la version 1 pour L'administrateur. Il est divisé en de côté class="gauche" pour le menu de gauche et en dehors class="droite" pour le contenu principal.
donc, c'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>
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'appela pendant 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));
},