Semantic-UI 消息信息变化

Semantic-UI 是一个优秀的前端 UI 框架，提供了丰富且易于使用的组件和样式。其中，消息信息组件是常用的组件之一，用于在页面展示各种类型的提示信息。

消息类型

Semantic-UI 提供了多种不同类型的消息，可以根据实际场景进行选择使用，包括：

• 提示消息（Message）：用于提示操作结果、状态等信息。
• 警告消息（Warning）：用于提示用户需要注意的信息。
• 错误消息（Error）：用于提示操作出错、异常等信息。
• 成功消息（Positive）：用于提示操作成功、任务完成等信息。

消息结构

消息信息组件包含以下结构：

<div class="ui message">
  <i class="close icon"></i>
  <div class="header">消息标题</div>
  <p>消息内容</p>
</div>

其中，ui message 是消息组件的基础 class，close icon 是关闭按钮的图标 class，header 是消息标题，p 是消息内容。

可以根据需要添加额外的 class 来自定义消息样式，例如：

<div class="ui message success">
  <i class="close icon"></i>
  <div class="header">操作成功</div>
  <p>任务已完成</p>
</div>

这里使用了 success class 来区分成功消息。

消息行为

在搭建前端页面时，消息的动态变化是非常重要的一个功能。Semantic-UI 消息信息组件提供了多种不同的行为，包括：

• 自动关闭（Dismissable）：在一定时间后自动关闭。
• 手动关闭（Manual Close）：用户手动关闭。
• 渐隐效果（Fade）：在关闭时进行渐隐效果。

这些行为可以通过 js 调用来实现，例如：

<div class="ui message success dismissable">
  <i class="close icon"></i>
  <div class="header">操作成功</div>
  <p>任务已完成</p>
</div>

<script>
  $(document).ready(function () {
    $('.message .close').on('click', function () {
      $(this).closest('.message').transition('fade');
    });
    setTimeout(function () {
      $('.message').fadeOut('slow');
    }, 5000);
  });
</script>

这里，我们给成功消息添加了 dismissable class 来表示自动关闭，并为关闭按钮绑定了 click 事件，在关闭时渐隐消失。

同时，还使用了 setTimeout 函数来实现了 5 秒后自动关闭的功能。

小结

以上就是 Semantic-UI 消息信息变化的相关介绍，包括消息类型、消息结构和消息行为。通过使用这些功能，我们可以轻松地实现丰富多样的消息提示，提升用户体验。