语义 UI 加载器禁用状态

介绍

语义 UI 是一个基于 HTML, CSS, jQuery 的 UI 框架，能够快速开发响应式 Web 页面。语义 UI 加载器是其中的一部分组件，用于显示页面加载状态。在某些情况下，我们需要禁用加载器来避免操作的发生或者提醒用户当前页面正在处理中。

如何禁用加载器

语义 UI 加载器提供了很方便的禁用功能，只需在加载器的设置中添加 disable 属性即可：

<div class="ui active dimmer" id="loader" disable>
  <div class="ui big text loader">Loading</div>
</div>

设置 disable 后，加载器将失去交互能力，不再响应任何事件。同时，加载器上的遮罩也被去除，用户可以操作页面中的其他元素。这在长时间的数据处理或者用户无法进行某些操作的情况下非常有用。

实现原理

语义 UI 加载器使用 dimmer.js 来实现遮罩和页面加载提示。在 dimmer.js 中，加载器的 disable 选项被重新赋值为：

if (settings.disable) {
  events = '';
  className += ' disabled';
  anim = '';
}

将 events 清空后，加载器不再响应任何事件；将 className 添加 disabled 后，禁用状态的 CSS 样式被应用；将 anim 设置为空，则加载器不再进行动画展示。为了使加载器能更好地与其他组件配合使用，加载器也提供了 dimmable 和 pageDimmer 选项来定制半透明遮罩和全屏遮罩的显示和隐藏样式。

结论

禁用语义 UI 加载器只需要添加 disable 属性，无需其他复杂的操作。同时，禁用状态使用了方便易懂的 CSS 和 JS 代码，程序员们只需了解操作原理即可快速应用到具体项目中，提高页面的用户体验。