Common 通用方法
以属性运行插件
AXUI的插件基本上都支持对物理节点以追加属性的方式运行,比如axPopup、axDropdown、axPagination等。当对插件使用参数的时候需要按json
格式书写,举例如下:
//标准json属性写法 <a axPopup='{content:"伟大的中国",close:true}'>按钮</a> //或省略前后大括号,如: <a axPopup='content:"伟大的中国",close:true'>按钮</a> //可对内外引号对调 <a axPopup="content:'伟大的中国',close:true">按钮</a>
插件选择器
AXUI的选择器内核是document.querySelector方法,最终返回满足条件的第一个节点;如果以new
实例化插件,例如new axPopup('#id',{content:'伟大的中国'}),那么大部分插件需要使用节点选择器,id、classname、节点名称等;AXUI插件选择器写法如下:
#id .child
:填写字符串中间以空格分开,表示寻找子节点,等同于document.querySelector('#id .child')选取子节点#id
:填写节点的id名称并以#作为前缀,将以第一个该id名作为插件物理节点.className
:填写节点的class类名称并以.作为前缀,,将以第一个该class类名作为插件物理节点[name]或[name='']
:填写节点的name名并以[作为前缀,以]作为后缀,将以第一个该name名作为插件物理节点NODENAME
:填写节点的大写节点名,将以第一个该节点名作为插件物理节点DOM
:如果传入的本身就是一个DOM节点,那么将以此作为插件物理节点
以节点名获取
-
<div id="testPop"> <button class="ax-btn" id="btn">以id获取</button> <button class="ax-btn pop">以class获取</button> <button class="ax-btn" name="open">以[name]获取</button> <button class="ax-btn" name="big">以[name='']获取</button> <button class="ax-btn child">以子选择器获取</button> <mark class="ax-btn">以节点名获取</mark> </div>
-
//从id获取节点 new axPopup('#btn', { content: '从id获取节点' }); //从className获取节点 new axPopup('.pop', { content: 'className获取节点' }); //从[name]获取节点 new axPopup('[open]', { content: '从[name]获取节点' }); //从[name='']获取节点 new axPopup('[name=big]', { content: '从[name=""]获取节点' }); //从nodeName获取节点 new axPopup('MARK', { content: '从nodeName获取节点' }); //从子选择器获取节点 new axPopup('#testPop .child', { content: '从子选择器获取节点' });