semantic-ui dimmer

semantic-ui dimmer(遮罩)

网上对于semantic-ui 的说明本身就少，dimmer的文档更是少之又少，以下只是个人摸索出的一些关于dimmer的认识，若有不当之处，还请见解，代码冗余，可以直接看结论。

---

dimmer 基本用法

以下面的例子说明基本用法

<div class="ui container">
  <div class="ui dimmer">
    <div class="content">
      <div class="center">Hello</div>
    </div>
  </div>
  <div class="div-one" style="width:100px;height:100px;background-color: #75b547"></div>
  <div class="div-two" style="width:100px;height:100px;background-color: #ff5734"></div>
</div>

如下方式可以触发dimmer,一般来说，$('.your-target-element')的元素就是要被遮罩的部分。

$('.container').dimmer({
  on:'hover'
});

遮罩的范围就是$('.your-target-element')部分。在本例当中就是整个container。

可以只遮罩部分网页内容，与上面的方法相同，设置想要遮罩的元素为$('.your-target-element')。

如果将dimmer 设置为$('.dimmer')的话，默认是遮罩dimmer元素的直接父元素内容。

比较特殊的全屏遮罩

我们常用的遮罩都是全屏遮罩。

$('.your-target-element')如果是dimmer元素的直接父元素的话，例如本例中的second-outer，那么会触发全屏遮罩。

<div class="ui container">
  <div class="second-outer">
    <div class="ui page dimmer">
      <div class="content">
        <div class="center">Hello</div>
      </div>
    </div>
    <div class="inner">
      <div class="div-one" style="width:100px;height:100px;background-color: #75b547"></div>
      <div class="div-two" style="width:100px;height:100px;background-color: #ff5734"></div>
    </div>
  </div>
  <div class="inner1">
    <div class="div-one" style="width:100px;height:100px;background-color: #75b547"></div>
    <div class="div-two" style="width:100px;height:100px;background-color: #ff5734"></div>
  </div>
</div>

这样会触发全屏遮罩，因为second-outer是dimmer元素的直接父元素。

$('.second-outer').dimmer({
  on:'hover'
});

而这样只会触发container 部分被遮罩。

$('.container').dimmer({
  on:'hover'
});

同样的，部分元素作为your-target-element只能触发该部分被遮罩，虽然这样做失去了 page dimmer 的意义。

$('.inner').dimmer({
  on:'hover'
});

结论：

1.$('.your-target-element').dimmer('show');会遮罩包含 your-target-element 元素的部分。

2.全屏遮罩$('.your-target-element')如果是dimmer元素的直接父元素，会触发全屏遮罩，否则只会遮罩对应部分。

3.$('.dimmer')会触发全屏遮罩或是遮罩dimmer元素的直接父元素。