Spy 滚动侦听

简介

滚动侦听一般用在需要监听进出视窗的元素，比如进入视窗添加动画样式，离开则删除动画样式；或者根据根据元素是否进入视野而触发某些事件。

使用方法

插件运行方式有两种：

ax*属性：对标签使用axSpy属性即可按默认参数运行插件。
js实例：通过new axSpy('#ID')方式创建实例运行。

请使用F12打开控制台查看打印结果。

                                <article>
                                    <img src="https://src.axui.cn/v2.0/public/images/full01.jpg" axSpy="onShown:()=>{console.log('图片1进来了')}">
                                    <div class="ax-break"></div>
                                    <img src="https://src.axui.cn/v2.0/public/images/full02.jpg" axSpy="onShown:()=>{console.log('图片2进来了')}">
                                    <div class="ax-break"></div>
                                    <img src="https://src.axui.cn/v2.0/public/images/full03.jpg" axSpy="onShown:()=>{console.log('图片3进来了')}">
                                    <div class="ax-break"></div>
                                    <img src="https://src.axui.cn/v2.0/public/images/full04.jpg" axSpy="onShown:()=>{console.log('图片4进来了')}">
                                    <div class="ax-break"></div>
                                    <img src="https://src.axui.cn/v2.0/public/images/full05.jpg" axSpy="onShown:()=>{console.log('图片5进来了')}">
                                </article>

侦听模式

侦听模式分单个元素和批量元素侦听；如果侦听元素为一个列表，那么使用批量侦听更方便。设置参数spySelector选择参与侦听的元素即表示批量侦听。

spySelector参数为className、nodeName等可被querySelectorAll识别的节点选择器。

                            <article axSpy="spySelector:'img',onShown:(dom)=>{console.log(`${dom.src}进来了`)}">
                                <img src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full03.jpg">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full04.jpg">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full05.jpg">
                            </article>

动画

通过参数in设置进入动画，多个动画className以英文逗号或空格分开，例如in:'ax-fadeIn ax-ani'。

通过参数out设置退出动画，由于out状态元素已经不可见，所以非必要不需要设置out参数了。

如果是批量侦听模式，而每一个侦听元素都需要配置不同的进入动画，那么可对侦听子元素设置spy="in:''"。

框架内置的进入和退出动画详细请点击这里。

                            <article>
                                <img src="https://src.axui.cn/v2.0/public/images/full01.jpg" axSpy="in:'ax-fadeIn'">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full02.jpg" axSpy="in:'ax-fadeInUp'">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full03.jpg" axSpy="in:'ax-fadeInLeft'">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full04.jpg" axSpy="in:'ax-fadeInRight'">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full05.jpg" axSpy="in:'ax-scaleIn'">
                            </article>

                            <div class="ax-break"></div>

                            <article axSpy="spySelector:'img'">
                                <img src="https://src.axui.cn/v2.0/public/images/full01.jpg" spy="in:'ax-fadeIn'">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full02.jpg" spy="in:'ax-fadeInUp'">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full03.jpg" spy="in:'ax-fadeInLeft'">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full04.jpg" spy="in:'ax-fadeInRight'">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full05.jpg" spy="in:'ax-scaleIn'">
                            </article>

                            <div class="ax-break"></div>

                            <article axSpy="spySelector:'img',in:'ax-scaleIn'">
                                <img src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full03.jpg">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full04.jpg">
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/full05.jpg">
                            </article>

只显示一次

默认侦听元素只要进入视窗都追加in的样式，退出视窗会删除in样式并追加out样式；如果将参数repeat设为false则只会追加一次in样式并且不再删除in样式和追加out样式。

                                    <article>
                                        <img src="https://src.axui.cn/v2.0/public/images/full03.jpg" axSpy="repeat:true,in:'ax-fadeInLeft'">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full04.jpg" axSpy="repeat:false,in:'ax-fadeInRight'">
                                    </article>

改变参照

侦听进入的视窗默认是以整个浏览器窗口或iframe窗口为参照的，如果需要参照物缩小到某个页面元素则可通过自定义parent参数来实现，parent可以是#id、className、nodeName或节点。

                            <div axSpy="parent:'#parent',in:'ax-fadeInRight',spySelector:'img'">

                                <div id="parent" style="height:400px;overflow: auto;">
                                    <article>
                                        <img src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full03.jpg">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full04.jpg">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full05.jpg">
                                    </article>
                                </div>
                                
                            </div>

关联元素

如果需要让页面中的其他元素也侦听对象发生联动则可使用rel参数，rel参数可定义多个关联元素，其支持写法如下：

文本字符串，单个选择器：例如rel="#id"/".classname"，详细请点击这里。
文本字符串，多个选择器，用英文逗号或空格分开
一个节点
多个节点数组

参数active是侦听元素进入视窗后给关联元素追加的属性或样式，有两种写法：

追加属性，类似[selected]，表示想关联元素追加一个selected属性
追加样式，如果是字符串格式，多个可用英文逗号或空格分开

侦听元素成功绑定关联元素后，点击关联元素，侦听元素将以父层为参照滚动到顶显示。

显示第三张图片时激活该按钮显示第四张图片时激活该按钮

                            <div class="ax-align-center">
                                <span id="relBtn01" class="ax-btn">显示第三张图片时激活该按钮</span>
                                <span id="relBtn02" class="ax-btn">显示第四张图片时激活该按钮</span>
                            </div>
                            <div axSpy="parent:'#relparent01',in:'ax-fadeInRight',spySelector:'img',active:'ax-primary'">
                                <div class="ax-break"></div>
                                <div id="relparent01" style="height:400px;overflow: auto;">
                                    <article>
                                        <img src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full03.jpg" spy="rel:'#relBtn01'">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full04.jpg" spy="rel:'#relBtn02'">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full05.jpg">
                                    </article>
                                </div>

                            </div>

使用关联元素还有其他方法

批量侦听，对每个侦听元素使用ID属性，页面中的a标签可使用href="#ID"进行关联,允许多个a标签关联一个侦听元素。
单个侦听，侦听元素直接使用rel参数传入关联元素的id（多个用英文逗号或空格分开）或节点（数组）

显示第三张图片时激活该按钮显示第四张图片时激活该按钮

                            <div class="ax-align-center">
                                <span href="#spy01" class="ax-btn">显示第三张图片时激活该按钮</span>
                                <span href="#spy02" class="ax-btn">显示第四张图片时激活该按钮</span>
                            </div>
                            <div axSpy="parent:'#relparent02',spySelector:'img',active:'ax-primary'">
                                <div class="ax-break"></div>
                                <div id="relparent02" style="height:400px;overflow: auto;">
                                    <article>
                                        <img src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full03.jpg" id="spy01">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full04.jpg" id="spy02">
                                        <div class="ax-break"></div>
                                        <img src="https://src.axui.cn/v2.0/public/images/full05.jpg">
                                    </article>
                                </div>

                            </div>

                            <div class="ax-break"></div>

                            <div class="ax-align-center">
                                <span id="spy03" class="ax-btn">显示第三张图片时激活该按钮</span>
                                <span id="spy04" class="ax-btn">显示第四张图片时激活该按钮</span>
                            </div>
                            <div class="ax-break"></div>
                            <div id="relparent03" style="height:400px;overflow: auto;">
                                <article>
                                    <img src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                    <div class="ax-break"></div>
                                    <img src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                    <div class="ax-break"></div>
                                    <img src="https://src.axui.cn/v2.0/public/images/full03.jpg" axSpy="parent:'#relparent03',in:'ax-fadeInRight',active:'ax-primary',rel:'#spy03'">
                                    <div class="ax-break"></div>
                                    <img src="https://src.axui.cn/v2.0/public/images/full04.jpg" axSpy="parent:'#relparent03',in:'ax-fadeInRight',active:'ax-primary',rel:'#spy04'">
                                    <div class="ax-break"></div>
                                    <img src="https://src.axui.cn/v2.0/public/images/full05.jpg">
                                </article>
                            </div>

添加和取消监听

添加监听方法为add(data,callback)；取消监听方法为remove(data.callback)。data参数可取值如下：

文本格式，一个选择器或多个选择器，多个选择器用英文逗号或空格分开
数组格式，即多个节点数组

callback为回调函数，支持一个参数即当前添加或取消监听的节点数组。

实例内的可用变量有：

this.items，实例监听元素数组
this.parentDom，实例父节点
this.navDom，实例菜单节点
this.btnDoms，实例菜单关联按钮数组
this.interact，监听交互对象实例（new IntersectionObserver）

加入监听的元素会自动带上spy属性，取消监听会删除该属性。其为一个对象，属性说明如下：

observed，布尔值，true表明已经加入侦听
in，字符串，进入动画className
out，字符串，退出动画className
rel，数组，关联按钮节点数组
state，字符串，监听元素状态，有show、showing、shown和hidden四种状态

全部图片添加监听全部图片取消监听添加最后两个图片监听取消最后两张图片监听

HTML JS

                                    <div id="method" style="height:400px;overflow: auto;">
                                        <article>
                                            <img src="<?=$local?>dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                            <div class="ax-break"></div>
                                            <img src="<?=$local?>dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                            <div class="ax-break"></div>
                                            <img src="<?=$local?>dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full03.jpg">
                                            <div class="ax-break"></div>
                                            <img src="<?=$local?>dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full04.jpg" id="last01">
                                            <div class="ax-break"></div>
                                            <img src="<?=$local?>dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full05.jpg" id="last02">
                                        </article>
                                    </div>
                                    <div class="ax-break"></div>
                                    <div class="ax-align-center">
                                        <a href="###" class="ax-btn" id="methodRemove">取消最后两张图片监听</a>
                                        <a href="###" class="ax-btn" id="methodAdd">添加最后两个图片监听</a>
                                        <a href="###" class="ax-btn" id="methodAddAll">全部图片添加监听</a>
                                    </div>

                                            let methodIns = new axSpy('#method', {
                                                in: 'ax-fadeInUp',
                                                parent: '#method',
                                                spySelector:'img',
                                                onBefore: () => {
                                                    //先阻止
                                                    return false;
                                                }
                                            }),
                                                methodAdd = document.querySelector('#methodAdd'),
                                                methodAddAll = document.querySelector('#methodAddAll'),
                                                methodRemoveAll = document.querySelector('#methodRemoveAll'),
                                                methodRemove = document.querySelector('#methodRemove');
                                            methodRemove.onclick = () => {
                                                methodIns.remove('#last01,#last02', (doms) => {
                                                    console.log('取消监听的节点', doms)
                                                });
                                            }
                                            methodAdd.onclick = () => {
                                                methodIns.add('#last01,#last02', (doms) => {
                                                    console.log('增加监听的节点', doms)
                                                });
                                            }
                                            methodAddAll.onclick = () => {
                                                //this.items是实例中内置变量，即当前加入监听的节点
                                                let items = methodIns.items;
                                                methodIns.add(items, (doms) => {
                                                    console.log('增加监听的节点', doms)
                                                });
                                            }
                                            methodRemoveAll.onclick = () => {
                                                //this.items是实例中内置变量，即当前加入监听的节点
                                                let items = methodIns.items;
                                                methodIns.remove(items, (doms) => {
                                                    console.log('取消监听的节点', doms)
                                                });
                                            }

侦听菜单

通过以上实例，制作侦听菜单是顺理成章的。创建侦听菜单步骤如下：

1、填写参数spySelector。该参数是侦听元素的选择器，通常为className或nodeName
2、每个侦听元素写上id属性
3、给联动按钮上写上href="#id"，此id即为关联的侦听元素id
4、（可选）填写active参数。该参数为联动按钮激活的属性（写法:[selected]）或className（多个用英文逗号或空格分开）
5、（可选）如果需要指定滚动区域请填写参数parent。该参数是侦听元素父容器的选择器，可填#id、className、nodeName或节点
6、（可选）如果需要指定导航区域请填写参数navSelector。该参数是侦听菜单的节点选择器，值可以是#id、className、nodeName或节点
7、（可选）如果需要进入动画请填写参数in。该参数可为一个或多个className，多个用英文逗号或空格分开

图片1 图片2 图片3 图片4 图片5

                                <div axSpy="parent:'#spys01',spySelector:'img',active:'[active]'">
                                    <div class="ax-align-center">
                                        <span class="ax-lamp-group"><a href="#pic01">图片1</a><a href="#pic02">图片2</a><a href="#pic03">图片3</a><a href="#pic04">图片4</a><a href="#pic05">图片5</a></span>
                                    </div>
                                    <div class="ax-break"></div>
                                    <div style="height:400px;overflow: auto;" id="spys01">
                                        <article>
                                            <img src="https://src.axui.cn/v2.0/public/images/full01.jpg" id="pic01">
                                            <div class="ax-break"></div>
                                            <img src="https://src.axui.cn/v2.0/public/images/full02.jpg" id="pic02">
                                            <div class="ax-break"></div>
                                            <img src="https://src.axui.cn/v2.0/public/images/full03.jpg" id="pic03">
                                            <div class="ax-break"></div>
                                            <img src="https://src.axui.cn/v2.0/public/images/full04.jpg" id="pic04">
                                            <div class="ax-break"></div>
                                            <img src="https://src.axui.cn/v2.0/public/images/full05.jpg" id="pic05">
                                        </article>
                                    </div>
                                </div>

如果已经明确侦听元素和菜单结构关系，可使用更简单的方式创建侦听菜单。

1、填写参数spySelector。该参数是侦听元素的选择器，通常为className或nodeName
2、填写参数navSelector。该参数是侦听菜单的节点选择器，值可以是#id、className、nodeName或节点
3、填写参数btnSelector。该参数是侦听菜单的子项选择器，通常为className或nodeName
4、（可选）填写active参数。该参数为联动按钮激活的属性（写法:[selected]）或className（多个用英文逗号或空格分开）
5、（可选）如果需要进入动画请填写参数in。该参数可为一个或多个className，多个用英文逗号或空格分开

图片1 图片2 图片3 图片4 图片5

                                    <div axSpy="parent:'#spys02',spySelector:'img',navSelector:'#spyNav',btnSelector:'a',active:'ax-primary'">
                                        <div class="ax-align-center" id="spyNav">
                                            <span class="ax-btn-group"><a href="###" class="ax-btn">图片1</a><a href="###" class="ax-btn">图片2</a><a href="###" class="ax-btn">图片3</a><a href="###" class="ax-btn">图片4</a><a href="###" class="ax-btn">图片5</a></span>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div style="height:400px;overflow: auto;" id="spys02">
                                            <article>
                                                <img src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                                <div class="ax-break"></div>
                                                <img src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                                <div class="ax-break"></div>
                                                <img src="https://src.axui.cn/v2.0/public/images/full03.jpg">
                                                <div class="ax-break"></div>
                                                <img src="https://src.axui.cn/v2.0/public/images/full04.jpg">
                                                <div class="ax-break"></div>
                                                <img src="https://src.axui.cn/v2.0/public/images/full05.jpg">
                                            </article>
                                        </div>
                                    </div>

监听事件

本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：

onShow/show 侦听元素开始出现在视窗中执行（intersectionRatio===0），支持三个参数，即监听节点、节点的关联按钮（数组），监听交互对象
onShowing/showing 侦听元素正出现在视窗中执行（0 < intersectionRatio < 1），支持三个参数，即监听节点、节点的关联按钮（数组），监听交互对象
onShown/shown 侦听元素完全出现在视窗中执行（intersectionRatio===1），支持三个参数，即监听节点、节点的关联按钮（数组），监听交互对象
onIn/in 侦听元素与视窗交互中执行（isIntersecting===true），支持三个参数，即监听节点、节点的关联按钮（数组），监听交互对象
onOut/out 侦听元素不与视窗交互时执行（isIntersecting===false），支持三个参数，即监听节点、节点的关联按钮（数组），监听交互对象
onAdd/add 添加侦听元素后执行，支持一个参数即当前加入侦听的节点数组
onRemove/remove 取消侦听元素后执行，支持一个参数即当前取消侦听的节点数组

演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。

HTML JS

                                        <article id="on">
                                            <img src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                            <div class="ax-break"></div>
                                            <img src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                            <div class="ax-break"></div>
                                            <img src="https://src.axui.cn/v2.0/public/images/full03.jpg">
                                            <div class="ax-break"></div>
                                            <img src="https://src.axui.cn/v2.0/public/images/full04.jpg">
                                            <div class="ax-break"></div>
                                            <img src="https://src.axui.cn/v2.0/public/images/full05.jpg">
                                        </article>

                                            let onIns = new axSpy('#on',{ spySelector: 'img' });
                                            onIns.on('shown', (dom) => {
                                                console.log(`${dom.src}进来了`);
                                            }).on('out', (dom) => {
                                                console.log(`${dom.src}离开了`);
                                            });

销毁实例

通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。

HTML JS


                                            <button class="ax-btn" id="destroyBtn">销毁</button>
                                            <button class="ax-btn" id="initBtn">初始化</button>
                                            <div class="ax-break"></div>
                                            <article id="destroy">
                                                <img src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                                <div class="ax-break"></div>
                                                <img src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                                <div class="ax-break"></div>
                                                <img src="https://src.axui.cn/v2.0/public/images/full03.jpg">
                                                <div class="ax-break"></div>
                                                <img src="https://src.axui.cn/v2.0/public/images/full04.jpg">
                                                <div class="ax-break"></div>
                                                <img src="https://src.axui.cn/v2.0/public/images/full05.jpg">
                                            </article>

                                            let destroyIns = new axSpy('#destroy', { spySelector: 'img' }),
                                                destroyBtn = document.querySelector('#destroy'),
                                                initBnt = document.querySelector('#initBtn');
                                            destroyBtn.onclick = () => {
                                                destroyIns.destroy(()=>{
                                                    alert('销毁了实例');
                                                });
                                            }
                                            initBtn.onclick = () => {
                                                destroyIns.init(()=>{
                                                    alert('初始化了实例');
                                                });
                                            }

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axSpy('#ID',{
            insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
            offset: '0px', //偏离顶部或底部多长距离触发，单位px，如果只有一个值则上下偏移值相同，如果需要单独定义请用英文逗号隔开，比如'-50px,-30px'表示上方偏移50px，下方偏移30px
            visible: [0, 0.5, 1], //可见区域占比，单位是小数，比如0.5表示目标50%的部分出现在屏幕中则触发，默认在刚显示、显示一半以及完全显示时触发
            parent: null,//以什么父节点为参照，可填#id、classname、nodename或节点，默认null表示以整个视窗为参照
            distance: 0,//侦听元素使用关联按钮滚动到顶部时距离顶部的高度，数值类型，默认为0即贴合顶部
            spySelector: '',//监听子元素的选择器，可以是nodeName或className（能使用querySelectorAll获取）
            navSelector: '',//菜单节点，可以是#id、nodeName、className或节点
            btnSelector: '',//监听菜单子元素的选择器，可以是nodeName或className（能使用querySelectorAll获取）
            duration: 0,//点击关联按钮页间跳转滚动动画的时间，默认为0即自动计算，可填具体数值，单位ms
            interval: 500,//防抖间隔时间，默认500ms，因为位移动画的缘故会导致交互+非交互两个状态之间频繁切换，继而导致动画抖动
            repeat: true,//是否每次出现在视窗则重复执行in动画，默认true，可选择false只执行一次（out状态不会删除in动画）
            active: '',//关联按钮激活的属性（写法：[selected]）或className（多个用英文逗号或空格分开）
            in: '',//进入视窗的动画className，多个用英文逗号或空格分开，例如in:'ax-fade ax-ani'
            out: '',//离开视窗的动画className，多个用英文逗号或空格分开，例如in:'ax-fade ax-ani'，通常不填！
            rel: '',//关联按钮，#id、className、nodeName或节点等，多个用英文逗号或空格分开，可是数组格式，如果是batch模式则不用填
            breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
            onBefore: '',//加载前执行函数，支持一个参数即被监听元素数组，如果该函数直接返回true则按既定程序执行加载，否则需手动添加监听（add方法）
            onShow: '',//开始进入视窗监听函数，支持三个参数，即监听节点、节点的关联按钮（数组），监听交互对象
            onShowing: '',//正在进入视窗监听函数，支持三个参数，即监听节点、节点的关联按钮（数组），监听交互对象
            onShown: '',//完全显示在视窗监听函数，支持三个参数，即监听节点、节点的关联按钮（数组），监听交互对象
            onIn: '',//进入视窗监听函数（包括show、showing和shown），支持三个参数，即监听节点、节点的关联按钮（数组），监听交互对象
            onOut: '',//离开视窗监听函数，支持三个参数，即监听节点、节点的关联按钮（数组），监听交互对象
            onAdd: '',//新增监听节点监听函数，支持一个参数，即监听新增监听节点数组
            onRemove: '',//取消监听节点监听函数，支持一个参数，即监听取消监听节点数组
            onInit: '',//回调函数，加载完毕执行，无参数
            onDestroy: '',//回调函数，销毁后执行，无参数
      });
});

以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"