如何使用语义 UI 'add content' javascript 行为？

Question

我正在尝试使用如下标记启动语义 UI 调光器：

<p id="move">Move me</p>

<div class="ui dimmable">

   <h3 class="ui header">
     Overlayable Section
   </h3>

   <div class="ui dimmer"></div>

</div>

而js是这样的：

$('.ui.dimmable')
  .dimmer(
    {on: 'click'},
    'add content', $('#move'))
;

显然有一个名为 'add content' 的行为应该从 DOM 中分离一个元素并将其添加到调光器中。

有没有人知道如何进行这项工作？

注意 - 以上确实会在单击“.ui.dimmable”时启动调光器，我只是无法理解如何使用 'behaviours' 语义 UI 文档提到的，并且找不到任何示例。

谢谢！

Answer 1

调光器内容默认为黑色，因此您需要将 #move 元素设为白色。我尝试将其更改为 h2 和 .ui.inverted.header

然后您需要将您想要的内容添加到您的调光器中：

$(".ui.dimmable").dimmer("add content", $("#move"));

并将其配置为在点击时显示

$(".ui.dimmable").dimmer({
    on: "click"
});

Try it on this JSFiddle

如何使用语义 UI 'add content' javascript 行为？

How to use Semantic UI 'add content' javascript behaviour?

javascript

semantic-ui