arale-popup
v1.2.0
Published
Popup 是可触发的浮层组件。
Downloads
7
Keywords
Readme
Popup
Popup 是可触发的浮层组件。封装了当用户点击、hover、focus 到指定元素时,可以触发另一个浮层显示的行为。
Popup 继承自 overlay,可使用其中包括 widget、base、class、events、attribute、aspect 的属性和方法。
配置说明
element element|string
弹出的浮层元素。也可以使用 template 参数传递模板来代替这个参数。
trigger element|string
触发元素。
triggerType string
触发类型,可选[hover|click|focus],默认为 hover。
delegateNode element|string
1.0.2+
触发事件委托的对象。当使用这个配置时,需要保证 trigger 参数是一个 selector !!!
effect string
基础的动画效果,可选[fade|slide],默认为空 。fade 和 slide 可以并行。
duration number
动画时长,默认 250 毫秒。
delay number
延迟 hover 触发显示的时长,默认 70 毫秒。设为-1
时,表示 popup 没有延迟显示和隐藏因素而变为 tooltip 的效果。
disabled boolean
是否能触发弹出效果,可用.set('disabled', true)
进行开关。
若有范例和演示中有其他参数(如自定义位置参数 align),请参见 Popup 的父类 Overlay。
属性
activeTrigger
总是指向触发显示浮层的当前触发元素(jQuery Node 对象)。
事件
animated
动画效果结束时的回调事件。.on('animated', function(){ })
最佳实践
seajs.use(['arale/popup/{{版本号}}/popup'], function(Popup){
var example = new Popup({
trigger: '#triggerId',
element: '#targetId'
});
});
需要 tooltip 效果的请如下调用:
seajs.use(['arale/popup/{{版本号}}/popup'], function(Popup){
var example = new Popup({
trigger: '#triggerId',
element: '#targetId',
delay: -1
});
});
另外,Popup 已从 Overlay 继承了点击页面空白处浮层消失,以及窗口改变大小后浮层重新定位等被动属性, 详细请查看 演示文档。
多触发器的委托应用
实践中常常遇到多个触发元素对应一个弹出层,而且触发元素会动态添加的情况。 这样如果通过多个实例来绑定 popup 效果就会比较麻烦。
这时,可以使用 delegateNode
这个参数将事件绑定到委托节点上,配合多个 trigger 来实现。
在委托节点内动态添加了 trigger 后,也无须重新绑定。
seajs.use(['popup'], function(Popup){
new Popup({
trigger: '.triggerClass',
element: '#popup',
delegateNode: '#delegateNode'
});
});
动态内容
当有多个触发元素,而弹出层是同一个,而且内容是根据不同触发元素而不同时,可以用下面的方式进行绑定:
seajs.use(['popup'], function(Popup){
new Popup({
trigger: '.triggerClass', // 有多个触发元素
element: '#popup'
}).before('show', funtion() {
// 通过 activeTrigger 拿到当前触发的触发元素
var content = this.activeTrigger.html();
// 动态设定内容
this.element.html(content);
});
});