AdminLTE基于Bootstrap:https://github.com/almasaeed2010/AdminLTE
实时预览: http ://almsaeedstudio.com/preview/
但我不确定如何在默认情况下折叠折叠框.
我假设它是基于Bootstrap构建的,这应该是相当简单的.我已经尝试了其他实现,例如将id设置为"collapsedOne"并尝试将div视为手风琴,但无济于事.
在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();
}
});
有什么建议？
提前致谢.
小智 43
当页面加载到其初始状态时,为什么不将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 -->
小智 7
对于那些使用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 中使用
在 Admin LTE 3 中，默认使用collapsed-card主卡上的类折叠。
像这样
<div class="col-md-3">
<div class="card collapsed-card">
<div class="card-header" >
<h3 class="card-title">Expandable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
</button>
</div>
</div>
<div class="card-body" >
The body of the card
</div>
</div>
</div>
您应该将图标更改为 fas fa-plus 然后初始框以加号开头
| 归档时间： |
|
| 查看次数： |
48395 次 |
| 最近记录： |