Init 初始化

简介

本框架的插件支持节点属性绑定插件,但是由于JavaScript的单线程特性,对于动态生成的节点将无法成功绑定,此时则需要借助axInit函数进行初始化绑定。

用法

该函数是对动态生成的节点绑定插件。

完整写法:axInit(data,parent),可简写为axInit(),参数说明如下:

  • data:选填项,支持两种数据类型:
    • 一个字符串,例如axInit('popup')
    • 一个字符串数组,例如axInit(['popup','dialog','accordion'])
  • parent:选填项,从哪个节点开始,默认是document,可自定义节点:
  •                                     <div id="box01"></div>
                                        <div class="ax-break"></div>
                                        <a href="###" class="ax-btn" id="box01Create">动态生成一个节点</a>
                                        <a href="###" class="ax-btn" id="box01Init">绑定一个插件</a>
                                        <div class="ax-break"></div>
                                        <div class="ax-break"></div>
                                        <div id="box02"></div>
                                        <div class="ax-break"></div>
                                        <a href="###" class="ax-btn" id="box02Create">动态生成多个节点</a>
                                        <a href="###" class="ax-btn" id="box02Init">绑定多个插件</a>
                                            
  •                                             let box01 = document.querySelector('#box01'),
                                                    box01Create = document.querySelector('#box01Create'),
                                                    box01Init = document.querySelector('#box01Init'),
                                                    box012 = document.querySelector('#box02'),
                                                    box02Create = document.querySelector('#box02Create'),
                                                    box02Init = document.querySelector('#box02Init');
                                                    box01Create.onclick = ()=>{
                                                        box01.innerHTML = ``;
                                                    }
                                                    box01Init.onclick = ()=>{
                                                        axInit('popup');
                                                        //axInit();也可
                                                    }
                                                    box02Create.onclick = ()=>{
                                                        box02.innerHTML = `
                                                        
                                                        
                                                        
                                                        `;
                                                    }
                                                    box02Init.onclick = ()=>{
                                                        axInit(['popup','dialog']);
                                                        //axInit();也可
                                                    }
                                            

支持的插件

该函数支持的插件目前包括:'axAccordion', 'axAlert', 'axAmount', 'axCheckbox', 'axCheckAll', 'axComplete', 'axDate', 'axDialog', 'axDodge', 'axDrawer', 'axDropdown', 'axInfinite', 'axInput', 'axLazyload', 'axList', 'axMenu', 'axMore', 'axPanel', 'axPopup', 'axProgress', 'axRange', 'axRipple', 'axSelect', 'axShare', 'axShortcut', 'axStick', 'axSwiper', 'axTab', 'axTags', 'axTooltip', 'axUpload', 'axTree', 'axRate'

'axLightbox','axValid'较复杂,暂时未列入

作为参数传入axInit(data)可保留ax前缀,也可以去掉ax前缀。如果参数data为空,那么将从网页寻找以上所有的属性节点并绑定插件(同时也会对other类型进行初始化)。

  •                                     <div id="box03"></div>
                                        <div class="ax-break"></div>
                                        <a href="###" class="ax-btn" id="box03Create">动态生成多个节点</a>
                                        <a href="###" class="ax-btn" id="box03Init">绑定多个插件</a>
                                            
  •                                             let box03 = document.querySelector('#box03'),
                                                    box03Create = document.querySelector('#box03Create'),
                                                    box03Init = document.querySelector('#box03Init');
                                                    box03Create.onclick = ()=>{
                                                        box03.innerHTML = `
                                                        
                                                        
                                                        
                                                        `;
                                                    }
                                                    box03Init.onclick = ()=>{
                                                        axInit();
                                                    }
                                            

other类型

有个特别的类型:other,对动态创建表单控件的ax-post-left和右侧的clear按钮有用,绑定相应js功能需要使用该类型。

  •                                             <div id="box04"></div>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn" id="box04Create">动态生成表单</a>
                                                <a href="###" class="ax-btn" id="box04Init">绑定js功能</a>
                                            
  •                                             let box04 = document.querySelector('#box04'),
                                                    box04Create = document.querySelector('#box04Create'),
                                                    box04Init = document.querySelector('#box04Init');
                                                    box04Create.onclick = ()=>{
                                                        box04.innerHTML = `
                                                        
    评论:
    `; } box04Init.onclick = ()=>{ axInit('other'); //axInit();也可 }