事件
Quicktab的事件API
事件的绑定有多种方式
- 通过初始化选项对象
- 通过DOM的事件处理
- 通过data属性
- 通过实例的
on方法
通过初始化选项绑定
const qtab = new Quicktab(el, {
onEventName: function (arg1, arg2, ...) {
//....
}
})通过DOM的事件处理
<div class="qtab"></div>
<script>
//事件监听
document.querySelector('.qtab').addEventListener('event-name', function (event) {
console.log(event.detail[0]);//当前quicktab对象
console.log(event.detail[1]);//arg1
console.log(event.detail[2]);//arg2
})
new Quicktab('.qtab',{
//...
})
</script>通过data属性来绑定事件
<div data-qt-toggle="quicktab" data-qt-id="qtab" data-qt-onInit="init" data-qt-onTabLoaded="tabLoad"></div>
<script>
function tabLoad(arg1,arg2,...) {
//this:当前quicktab对象
}
// init事件
function init() {
}
</script>通过实例的on方法
const qtab = new Quicktab(el, {
//...
})
qtab.on('event-name',function(evt){
console.log(evt[0]);//当前quicktab对象
console.log(evt[1]);//arg1
console.log(evt[2]);//arg2
})提示
如果您使用DOM事件处理程序，请确保在执行事件之前绑定事件监听器,on方式监听事件由于它是必须在实例化之后才能监听,因此部分事件通过on方法是无法监听的,下面会说明哪些方法使用on的方式无法监听。
onTabActivated
DOM/on Event:
tab-activated参数:
url详情:
当Tab被激活时触发,该事件不支持on方式绑定,参数包含:
url: 当前Tab的url
onTabLoaded
DOM/on Event:
tab-loaded参数:
url详情:
当Tab加载完毕时触发:
url: 当前Tab的url
onTabTimeout
DOM/on Event:
tab-timeout参数:
url详情:
当Tab加载超时时触发(需要启用超时功能),参数包含:
url: 当前Tab的url
onTabFinally
DOM/on Event:
tab-finally参数:
url详情:
Tab加载完毕或超时都会触发,参数包含:
url: 当前Tab的url
onTabAll
DOM/on Event:
tab-all参数:
undefined详情:
页面上所有的Tab都完成时(它会等待所有的Tab都进入Finally阶段后触发)触发
onTabLoadingTransitionend
DOM/on Event:
tab-loading-transitionend参数:
url详情:
Tab加载层过渡完毕时触发(需要启用loading加载层效果),参数包含:
url: 当前Tab的url
onTabClick
DOM/on Event:
tab-click参数:
url详情:
Tab被点击时触发,参数包含:
url: 当前Tab的url
onTabDoubleClick
DOM/on Event:
tab-double-click参数:
url详情:
Tab被双击时触发(需要启用Tab双击功能),参数包含:
url: 当前Tab的url
onTabClose
DOM/on Event:
tab-close参数:
url详情:
Tab关闭时触发,参数包含:
url: 当前Tab的url
onTabCloseAll
DOM/on Event:
tab-close参数:
undefined详情:
所有的可被关闭Tab都被关闭的时候触发
onInit
DOM/on Event:
init参数:
undefined详情:
Quicktab初始化完毕回调
事件触发顺序总览