浮层 / Popup

优质

小牛编辑

140浏览

2023-12-01

Popup 是一个工具控件，用来完成浮出层的功能，经常作为其他控件的子控件组合使用，一般不直接使用。

Popup 的主要参数是 triggers，用以指定触发 Popup 浮层。triggers 是一个 jQuery 可以接受的css selector。

使用 target 属性来指定 Popup 的显示位置。

<input type="text" id="input-target">

require(['jquery', 'moye/Popup'], function ($, Popup) {

  var input = document.getElementById('input-target');
  new Popup({
    target: input,
    triggers: input,
    content: 'this is popup content'
  })
  .render();
  
});

如果不指定 target 属性，那么 Popup 会挂靠到当前的触发元素上

<ul>
    <li class="popup-target">
      <span>aaaaaaaaaa</span>
    </li>
    <li class="popup-target">
      <span>bbbbbbbbbb</span>
    </li>
    <li class="popup-target">
      <span>cccccccccc</span>
    </li>
    <li class="popup-target">
      <span>dddddddddd</span>
    </li>
    <li class="popup-target">
      <span>eeeeeeeeee</span>
    </li>
    <li class="popup-target">
      <span>ffffffffff</span>
    </li>
    <li class="popup-target">
      <span>jjjjjjjjjj</span>
    </li>
  </ul>

require(['jquery', 'moye/Popup'], function ($, Popup) {

  new Popup({
    triggers: '.popup-target',
    content: 'this is popup content',
    dir: 'rc',
    mode: 'over'
  })
  .render();
  
});

可以通过指定 dir 参数来调整 Popup 挂靠的方向，上例中 dir 设定为 rc，表示 Popup 挂靠到目标元素的右侧中间位置。

<button id="add">添加一项</button>
<ul id="live-trigger-container">
  <li class="popup-target">
    <span>aaaaaaaaaa</span>
  </li>
  <li class="popup-target">
    <span>bbbbbbbbbb</span>
  </li>
  <li class="popup-target">
    <span>cccccccccc</span>
  </li>
  <li class="popup-target">
    <span>dddddddddd</span>
  </li>
  <li class="popup-target">
    <span>eeeeeeeeee</span>
  </li>
  <li class="popup-target">
    <span>ffffffffff</span>
  </li>
  <li class="popup-target">
    <span>jjjjjjjjjj</span>
  </li>
</ul>

require(['jquery', 'moye/Popup'], function ($, Popup) {

  new Popup({
    triggers: '.popup-target',
    liveTriggers: '#live-trigger-container',
    content: 'this is popup content',
    dir: 'rc',
    mode: 'over'
  })
  .render();

  $('#add').on('click', function () {
    $('<li>').addClass('popup-target').html(Math.random()).appendTo('#live-trigger-container');
  });
  
});

可以指定 liveTriggers 来限定一个容器, 在限容器内的所有 triggers 都可以触发 Popup，即使它们是在初始化之后被创建的。