如何更改设置并将事件侦听器添加到语义 ui 侧边栏？

Question

我有一个语义 UI 侧边栏，我希望在显示侧边栏时页面不会变暗，而且我希望在侧边栏完全可见时触发 onShow 事件。

$("#sidebar").sidebar onShow: =>
    @onShow() if @onShow

$("#sidebar").sidebar 'setting', dimPage: false

目前，只有其中一项有效，具体取决于最后一项。要么页面变暗（这不是我想要的）并且触发了 onShow 事件，要么页面没有变暗但永远不会触发 onShow 事件。

看起来第二个设置覆盖了第一个设置。

那么如何同时设置 dimPage 设置和设置事件处理程序而不相互覆盖？

Answer 1

sidebar函数和SemanticUI中的其他初始化函数一样，也可以将一个对象作为参数，你可以在其中传递所有的设置和事件同时，所以在你的情况下，你可以这样做：

$("#sidebar").sidebar({
    onShow: function() {
        console.log('on show event');
    },
    dimPage: false
});

进一步说明：如果您在两个单独的调用中执行此操作，一个将覆盖另一个。换句话说，您发布的代码相当于做：

$("#sidebar").sidebar({
    dimPage: false
});
$("#sidebar").sidebar({
    onShow: function() {
        console.log('on show event');
    }
});

因此第二次初始化将 dimPage 设置为其默认值，即 true.

Answer 2

@fstanis 的回答很好，但它也可以分成 2 个单独的函数调用，如下所示。

$("#sidebar").sidebar("setting", "dimPage", false);
$("#sidebar").sidebar("setting", "onShow", function() {});

在这种特殊情况下这不是很有用，因为我们使用的是相同的选择器，但是当您想更新 2 个不同的元素列表的设置时它会派上用场，并且某些元素恰好包含在两者中列出。如果没有这种分离，最后添加的设置将覆盖其他设置。

How to change setting AND add an event listener to semantic ui side bar?