AdminLTE box-collapse trigger/event 侦听器

Question

Bootstrap 有方便的事件，当您正确使用它们的 .collapse classes 时会触发这些事件。在使用 AdminLTE 的可折叠盒子时，我希望我能做类似的事情，这样我就可以在盒子完全折叠时停用盒子内部的渲染，并在完全打开时重新激活渲染。

我尝试使用 here 中的事件，例如 shown.bs.collapse 或 hidden.bs.collapse，遵循他们的示例：

$('#myCollapsible').on('hidden.bs.collapse', function () {
    // do something…
})

但在登录事件后，AdminLTE 的可折叠框似乎并没有触发这些事件。我搜索了一下AdminLTE的折叠框有没有类似的事件，但是好像没有。我还查看了是否可以在将折叠框 class 添加到有问题的 div 时创建一个侦听器，但这似乎不是一个可行的选择，因为 solutions建议自己触发事件。不幸的是，我无法控制何时添加 class。

有人对此有解决方案吗？提前致谢！

Answer 1

我遇到了和你一样的问题

我试过这样：

$(seletor).on("remove", function (){ //code here })

但是以太币不行。

我解决了我的问题，在删除按钮上添加了一个 "click" 事件：

$("#boxdiv button").on("click", function () {
   // Close event
})

这是在盒子关闭之前执行的。

Answer 2

您可以修改adminLTE 的app.js 文件来实现您想要的。只需在折叠（slideUp）和展开（slideDown）功能完成后调用的addClass和removeClass方法分别添加触发器即可。

box_content.slideUp(_this.animationSpeed, function () {
    box.addClass("collapsed-box");
    box.trigger('collapsed',[box, element]);
});

box_content.slideDown(_this.animationSpeed, function () {
    box.removeClass("collapsed-box");
    box.trigger('expanded',[box, element]);
});

Answer 3

就我而言，我不想编辑 app.js（因为它是通过 Bower 自动安装的），所以这里有一个替代方案：

$("#my-box-id [data-widget='collapse']").click(function() {
    var box = $(this).parents(".box").first();
    if (!box.hasClass("collapsed-box")) {
        console.log("collapsing #my-box-id ...");
    } else {
        console.log("expanding #my-box-id ...");
    }
});

Answer 4

在我的情况下，当使用 Admin-LTE 3.0 并希望使用小部件卡片时，例如最大化和最小化卡片。

第一个

我修改了 Admin-LTE 模板的默认结构：

 <div class="card card-success" id="card-slide">
        <div class="card-header">
            <h3 class="card-title">Bagian Sliders</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="maximize" onclick="card_collapse('#card-slide')" title="Click to expand"><i class="fas fa-expand"></i>
                </button>
            </div>
            <!-- /.card-tools -->
        </div>
        <!-- /.card-header -->
        <div class="card-body">
            <div class="card-on-minimized">
                Pengaturan slider yang ada pada bagian beranda halaman.
            </div>
            <div class="card-on-maximized d-none">
                Maximizable
            </div>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->

第二

我做了card_collapse()接收触发事件的函数：

function card_collapse(id) {
     if (!$(id).hasClass('maximized-card')) {
         $(id + ' .card-on-minimized').addClass('d-none');
         $(id + ' .card-on-maximized').removeClass('d-none');
     } else {
         $(id + ' .card-on-minimized').removeClass('d-none');
         $(id + ' .card-on-maximized').addClass('d-none');
     }
}

原来如此！

此致

AdminLTE box-collapse trigger/event 侦听器

AdminLTE box-collapse trigger/event listener

html

css

jquery

twitter-bootstrap-3

adminlte