DropLab

原文：https://docs.gitlab.com/ee/development/fe_guide/droplab/droplab.html

• Usage
  • Static data
  • Explicit instantiation
  • Dynamic data
• Internal selectors
• Internal events
• Plugins
  • Usage
  • Documentation
  • Development

DropLab

满足您所有自定义下拉菜单需求的通用下拉菜单.

Usage

只需添加data-dropdown-trigger HTML 属性即可使用 DropLab. 此属性使我们能够找到下拉菜单的”触发” （切换） ，无论是按钮，链接还是输入.

data-dropdown-trigger应该是 DropLab 可以用来查找触发器的下拉列表的 CSS 选择器.

您还应该添加data-dropdown属性以声明下拉列表. 该值无关紧要.

DropLab 类没有副作用，因此在 DOM 准备就绪时，必须始终调用.init . DropLab.prototype.init的参数与DropLab.prototype.addHook相同. 如果不提供任何参数，它将全局查询并实例化所有与 droplab 兼容的下拉菜单.

<a href="#" data-dropdown-trigger="#list">Toggle</a>
<ul id="list" data-dropdown>
  <!-- ... -->
<ul>

const droplab = new DropLab();
droplab.init();

As you can see, we have a “Toggle” link, that is declared as a trigger. It provides a selector to find the dropdown list it should control.

Static data

您可以添加静态列表项.

<a href="#" data-dropdown-trigger="#list">Toggle</a>
<ul id="list" data-dropdown>
  <li>Static value 1</li>
  <li>Static value 2</li>
<ul>

const droplab = new DropLab();
droplab.init();

Explicit instantiation

您可以使用DropLab.prototype.init方法将 trigger 和 list 元素作为构造函数参数传递，以返回 DropLab 的非全局实例.

<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
<ul id="list" data-dropdown>
  <!-- ... -->
<ul>

const trigger = document.getElementById('trigger');
const list = document.getElementById('list');
const droplab = new DropLab();
droplab.init(trigger, list);

您还可以使用DropLab.prototype.addHook将挂钩添加到现有的 DropLab 实例.

<a href="#" data-dropdown-trigger="#auto-dropdown">Toggle</a>
<ul id="auto-dropdown" data-dropdown><!-- ... --><ul>
<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
<ul id="list" data-dropdown><!-- ... --><ul>

const droplab = new DropLab();
droplab.init();
const trigger = document.getElementById('trigger');
const list = document.getElementById('list');
droplab.addHook(trigger, list);

Dynamic data

将data-dynamic添加到下拉元素将启用动态列表呈现.

您可以使用提供的数据对象的键对列表项进行模板化. 使用车把语法{{ value }}使 HTML 转义该值. 使用<%= value %>语法可以简单地插值. 使用<%= value %>语法评估该值.

将对象数组传递给DropLab.prototype.addData将为该 DropLab 实例跟踪的所有data-dynamic下拉列表呈现该数据.

<a href="#" data-dropdown-trigger="#list">Toggle</a>
<ul id="list" data-dropdown data-dynamic>
  <li><a href="#" data-id="{{id}}">{{text}}</a></li>
</ul>

const droplab = new DropLab();
droplab.init().addData([{
  id: 0,
  text: 'Jacob',
}, {
  id: 1,
  text: 'Jeff',
}]);

或者，您可以指定一个特定的下拉菜单，以将数据添加到该数据，但将数据作为第二个参数传递，并将 trigger 元素的id作为第一个参数传递.

<a href="#" data-dropdown-trigger="#list" id="trigger">Toggle</a>
<ul id="list" data-dropdown data-dynamic>
  <li><a href="#" data-id="{{id}}">{{text}}</a></li>
</ul>

const droplab = new DropLab();
droplab.init().addData('trigger', [{
  id: 0,
  text: 'Jacob',
}, {
  id: 1,
  text: 'Jeff',
}]);

这使您可以轻松混合静态和动态内容，即使使用一个触发器也是如此.

请注意，在有关data-dropdown属性的范围内使用范围来捕获两个下拉列表，其中之一是动态的.

<input id="trigger" data-dropdown-trigger="#list">
<div id="list" data-dropdown>
  <ul>
    <li><a href="#">Static item 1</a></li>
    <li><a href="#">Static item 2</a></li>
  </ul>
  <ul data-dynamic>
    <li><a href="#" data-id="{{id}}">{{text}}</a></li>
  </ul>
</div>

const droplab = new DropLab();
droplab.init().addData('trigger', [{
  id: 0,
  text: 'Jacob',
}, {
  id: 1,
  text: 'Jeff',
}]);

Internal selectors

DropLab 添加了一些 CSS 类，以帮助降低集成的障碍.

例如：

• 将droplab-item-selected CSS 类添加到通过单击鼠标或 Enter 键选择的项目中.
• 将droplab-item-active CSS 类添加到使用箭头键导航选择的项目中.
• 您可以将droplab-item-ignore CSS 类添加到您不想选择的任何项目中. 例如，一个不应为交互式的<li class="divider"></li>列表分隔符元素.

Internal events

DropLab 使用一些自定义事件来帮助降低集成障碍.

例如：

• 单击li列表项时会触发click.dl事件. 当使用键盘选择了列表项时，也会触发该事件. 当它也烧HookButton按键（注册button标签或a标签触发）.
• 所述input.dl当事件被触发HookInput （注册input标签触发）触发input事件.
• 该mousedown.dl当事件被触发HookInput触发mousedown事件.
• 该keyup.dl当事件被触发HookInput触发keyup事件.
• 该keydown.dl当事件被触发HookInput触发keydown事件.

这些自定义事件将detail对象添加到提供一些潜在有用数据的原始Event对象.

Plugins

插件是添加钩子后被注册为要执行的对象（实例化 droplab 触发器和下拉菜单时）.

如果未检测到模块 API，则该库将像使用window.DropLab那样回退，并添加window.DropLab.plugins.PluginName .

Usage

要使用插件，您可以将它们作为DropLab.prototype.init或DropLab.prototype.addHook的第三个参数传递给数组. 一些插件需要配置值，可以将 config 对象作为第四个参数传递.

<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
<ul id="list" data-dropdown><!-- ... --><ul>

const droplab = new DropLab();
const trigger = document.getElementById('trigger');
const list = document.getElementById('list');
droplab.init(trigger, list, [droplabAjax], {
  droplabAjax: {
    endpoint: '/some-endpoint',
    method: 'setData',
  },
});

Documentation

• Ajax plugin
• Filter plugin
• InputSetter plugin

Development

当为 droplab 触发器+下拉菜单初始化插件时，DropLab 将调用插件的init函数，因此必须在插件中实现.

class MyPlugin {
  static init() {
    this.someProp = 'someProp';
    this.someMethod();
  }
  static someMethod() {
    this.otherProp = 'otherProp';
  }
}
export default MyPlugin;