Init 初始化

简介

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

用法

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

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

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

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

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

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

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

HTML JS

code
01 <div id="box01"></div>
02 <div class="ax-break"></div>
03 <a href="###" class="ax-btn" id="box01Create">动态生成一个节点</a>
04 <a href="###" class="ax-btn" id="box01Init">绑定一个插件</a>
05 <div class="ax-break"></div>
06 <div class="ax-break"></div>
07 <div id="box02"></div>
08 <div class="ax-break"></div>
09 <a href="###" class="ax-btn" id="box02Create">动态生成多个节点</a>
10 <a href="###" class="ax-btn" id="box02Init">绑定多个插件</a>
code
01 let box01 = document.querySelector('#box01'),
02     box01Create = document.querySelector('#box01Create'),
03     box01Init = document.querySelector('#box01Init'),
04     box012 = document.querySelector('#box02'),
05     box02Create = document.querySelector('#box02Create'),
06     box02Init = document.querySelector('#box02Init');
07     box01Create.onclick = ()=>{
08         box01.innerHTML = `<button class="ax-btn ax-primary" axpopup="content:'伟大的中国'">popup窗</button>`;
09     }
10     box01Init.onclick = ()=>{
11         axInit('popup');
12         //axInit();也可
13     }
14     box02Create.onclick = ()=>{
15         box02.innerHTML = `
16         <button class="ax-btn ax-primary" axpopup="content:'伟大的中国'">popup窗01</button>
17         <button class="ax-btn ax-primary" axpopup="content:'伟大的中国'">popup窗02</button>
18         <button class="ax-btn ax-primary" axdialog="content:'伟大的中国'">dialog窗</button>
19         `;
20     }
21     box02Init.onclick = ()=>{
22         axInit(['popup','dialog']);
23         //axInit();也可
24     }

支持的插件

该函数支持的插件目前包括：'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

code
1 <div id="box03"></div>
2 <div class="ax-break"></div>
3 <a href="###" class="ax-btn" id="box03Create">动态生成多个节点</a>
4 <a href="###" class="ax-btn" id="box03Init">绑定多个插件</a>
code
01 let box03 = document.querySelector('#box03'),
02     box03Create = document.querySelector('#box03Create'),
03     box03Init = document.querySelector('#box03Init');
04     box03Create.onclick = ()=>{
05         box03.innerHTML = `
06         <button class="ax-btn ax-primary" axpopup="content:'伟大的中国'">popup窗01</button>
07         <button class="ax-btn ax-primary" axpopup="content:'伟大的中国'">popup窗02</button>
08         <button class="ax-btn ax-primary" axdialog="content:'伟大的中国'">dialog窗</button>
09         `;
10     }
11     box03Init.onclick = ()=>{
12         axInit();
13     }

other类型

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

动态生成表单绑定js功能

HTML JS

code
1 <div id="box04"></div>
2 <div class="ax-break"></div>
3 <a href="###" class="ax-btn" id="box04Create">动态生成表单</a>
4 <a href="###" class="ax-btn" id="box04Init">绑定js功能</a>
code
01 let box04 = document.querySelector('#box04'),
02     box04Create = document.querySelector('#box04Create'),
03     box04Init = document.querySelector('#box04Init');
04     box04Create.onclick = ()=>{
05         box04.innerHTML = `
06         <div class="ax-form-group">
07             <div class="ax-flex-row">
08                 <div class="ax-form-con">
09                     <div class="ax-form-input">
10                         <span class="ax-pos-left">评论：</span>
11                         <textarea placeholder="最多输入100个字..."></textarea>
12                         <span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear=""></a></span>
13                     </div>
14                 </div>
15             </div>
16         </div>
17         `;
18     }
19     box04Init.onclick = ()=>{
20         axInit('other');
21         //axInit();也可
22     }