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: '从子选择器获取节点' });