Init 初始化

简介

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

用法

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

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

data:选填项，支持两种数据类型：

一个字符串，例如axInit('popup')
一个字符串数组，例如axInit(['popup','dialog','accordion'])

parent:选填项，从哪个节点开始，默认是document，可自定义节点：

动态生成一个节点绑定一个插件

动态生成多个节点绑定多个插件

HTML JS

                                    <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类型进行初始化）。

动态生成多个节点绑定多个插件

HTML JS

                                    <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功能需要使用该类型。

动态生成表单绑定js功能

HTML 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();也可
                                                }