Combobox

Combobox 是可触发的浮层组件。封装了当用户点击、hover、focus 到指定元素时，可以触发另一个浮层显示的行为，点击页面空白处浮层消失等等特性。

Combobox 继承了 Overlay，可使用其中属性和方法。

配置说明

element element|string

弹出的浮层元素。也可以使用 template 参数传递模板来代替这个参数。

trigger element|string

触发元素。

triggerType string

触发类型，可选[hover|click|focus]，默认为 hover。

delay number

延迟 hover 触发显示的时长，默认 70 毫秒。设为-1时，表示 Combobox 没有延迟显示和隐藏因素而变为 tooltip 的效果。

disabled boolean

是否能触发弹出效果，可用.set('disabled', true)进行开关。

align object

定位参数。

最佳实践

var Combobox = FNX.include('combobox/combobox');

var example = new Combobox({
    trigger: '#triggerId',
    element: '#targetId'
});

需要 tooltip 效果的请如下调用：

var Combobox = FNX.include('combobox/combobox');

var example = new Combobox({
    trigger: '#triggerId',
    element: '#targetId',
    delay: -1
});

另外，Popup 已从 Overlay 继承了窗口改变大小后浮层重新定位等被动属性。

动态内容

当有多个触发元素，而弹出层是同一个，而且内容是根据不同触发元素而不同时，可以用下面的方式进行绑定：

var Combobox = FNX.include('combobox/combobox');


new Combobox({
    trigger: '.triggerClass', // 有多个触发元素
    element: '#combobox'
}).before('show', function() {
    // 通过 activeTrigger 拿到当前触发的触发元素
    var content = this.activeTrigger.html();
    // 动态设定内容
    this.element.html(content);
});

示例