DropLab
DropLab
满足您所有自定义下拉菜单需求的通用下拉菜单.
只需添加 HTML 属性即可使用 DropLab. 此属性使我们能够找到下拉菜单的”触发” (切换) ,无论是按钮,链接还是输入.
data-dropdown-trigger
应该是 DropLab 可以用来查找触发器的下拉列表的 CSS 选择器.
您还应该添加data-dropdown
属性以声明下拉列表. 该值无关紧要.
DropLab 类没有副作用,因此在 DOM 准备就绪时,必须始终调用.init
. DropLab.prototype.init
的参数与DropLab.prototype.addHook
相同. 如果不提供任何参数,它将全局查询并实例化所有与 droplab 兼容的下拉菜单.
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.
您可以添加静态列表项.
<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
<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
<ul id="list" data-dropdown>
<!-- ... -->
<ul>
您还可以使用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);
将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
作为第一个参数传递.
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 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',
}]);
例如:
- 将 CSS 类添加到通过单击鼠标或 Enter 键选择的项目中.
- 将
droplab-item-active
CSS 类添加到使用箭头键导航选择的项目中. - 您可以将
droplab-item-ignore
CSS 类添加到您不想选择的任何项目中. 例如,一个不应为交互式的<li class="divider"></li>
列表分隔符元素.
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
对象.
插件是添加钩子后被注册为要执行的对象(实例化 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>
Development
class MyPlugin {
static init() {
this.someProp = 'someProp';
this.someMethod();
}
static someMethod() {
this.otherProp = 'otherProp';
}
}
export default MyPlugin;