Semantic-UI Popup 基本变体介绍

简介

Semantic-UI Popup 是一款基于 jQuery 和 CSS 的弹出框插件，可以轻松地实现基本的弹出框效果并支持多种自定义选项。本文介绍了 Semantic-UI Popup 插件的基本变体，并提供了代码示例。

基本用法

引入文件

在页面中引入需要的 CSS 和 JS 文件：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.js"></script>

HTML 结构

按照以下格式创建 HTML 结构：

<div class="ui popup">
  <div class="header">标题</div>
  <div class="content">内容</div>
</div>

其中，.header 和 .content 是可选项。

初始化

按照以下格式初始化 Popup 插件：

$('.ui.popup').popup();

基本变体

遮罩

可以通过 on 属性为 Popup 插件添加遮罩效果，代码如下：

<div class="ui popup" on="click">
  <div class="header">标题</div>
  <div class="content">内容</div>
</div>

这样可以实现点击按钮弹出遮罩式弹框的效果。注意，该属性的值可以是所有 jQuery 支持的事件类型。

触发器

默认情况下 Popup 插件没有触发器（即打开弹框的按钮）。可以通过以下代码为其添加触发器：

<button class="ui button" id="trigger">弹出框</button>
<div class="ui popup" on="click" data-variation="wide" data-position="bottom left">
  <div class="header">标题</div>
  <div class="content">内容</div>
</div>
<script>
  $('#trigger').popup({
    popup: $('.ui.popup')
  });
</script>

其中，#trigger 为触发器的 ID，data-variation 和 data-position 是 Popup 的自定义选项，分别表示弹框的样式和出现的位置。值得注意的是，在初始化时需要将 popup 属性设为弹框对象（这里是 $('.ui.popup')）。

带箭头

可以使用 data-inverted 属性为 Popup 插件添加箭头。代码如下：

<div class="ui popup" on="click" data-inverted>
  <div class="header">标题</div>
  <div class="content">内容</div>
</div>

该属性会在弹框出现时自动将箭头添加到合适的位置。

悬浮

使用 on 属性可以将 Popup 插件设为悬浮框，这样鼠标经过时会自动弹出弹框。代码如下：

<div class="ui icon button" id="hoverTrigger">
  <i class="info circle icon"></i>
</div>
<div class="ui popup" on="hover" data-inverted>
  <div class="header">标题</div>
  <div class="content">内容</div>
</div>
<script>
  $('#hoverTrigger').popup({
    popup: $('.ui.popup')
  });
</script>

注意，这里将 #hoverTrigger 设为了一个带图标的按钮，该按钮可以作为悬浮框的触发器。on 属性的值为 hover 表示使用悬浮框的效果。

高级用法

绑定事件

可以使用 Popup 插件内置的回调函数在特定的时间执行特定的操作，例如在弹框出现后再进行一些操作：

$('.ui.popup').popup({
  onVisible: function() {
    console.log('Popup 已出现！');
  }
});

在弹出框弹出后，onVisible 函数会自动被调用。

嵌套应用

Popup 插件本身也支持嵌套，因此可以实现多层弹出框。例如：

<button class="ui button" id="trigger">弹出框</button>
<div class="ui popup" on="click" data-variation="wide" data-position="bottom left">
  <div class="header">标题</div>
  <div class="content">内容</div>
  <div class="ui popup" on="click" data-variation="very wide" data-position="top right">
    <div class="header">内部标题</div>
    <div class="content">内部内容</div>
  </div>
</div>
<script>
  $('#trigger').popup({
    popup: $('.ui.popup')
  });
</script>

这里的 data-variation 和 data-position 属性可以自定义为适合自己的样式和位置。

动态更新

Popup 插件也支持动态更新弹框内容和位置等信息。例如，下面的代码在弹框弹出后再次调用 Popup 插件的 setVariation 方法，更新样式：

$('.ui.popup').popup({
  onVisible: function() {
    $(this).popup('setVariation', 'wide');
  }
});

其它相关方法还包括 setHtml、setPosition 等。需要注意的是，这些方法必须在弹框弹出后才能被调用。

结语

Semantic-UI Popup 插件是一款轻量级的弹出框插件，兼容性好且支持多种自定义选项。使用它，可以轻松地实现不同类型的弹框效果。