Dropdown 下拉链接
简介
下拉链接菜单时通过axPopup插件实现的。axPopup用法点击这里。axDropdown插件支持多种内容类型，包括信息列表、按钮列表、复选列表、单选列表、单行表单域、多行表单域以及html。
axDropdown完整的数据如下：
- label:项目标题
- url:超链接，list类型下有效
- prefix：项目前缀，是一个对象，分别有type和data属性：
- type:legend：图标类型，data值通常是ax-icon-*，如果用户自行引入图标字体则按需填入
- type:avatar：圆形头像，data值为图片地址
- type:image：方形图片，data值为图片地址
- suffix：项目后缀，即在末尾显示的文字内容，list和button类型下有效
- target：链接打开方式，默认_blank，可填写self，list类型下有效
- disabled：是否禁用项目，默认false，可选择true禁用，list和button类型下有效
- value:项目代表的值，点击项目可将value赋予目标对象，button类型下有效
- props:项目其他属性，是一个对象，可以填class，style等，例如props:{class:'ax-color-primary',style:'color:red'}
- callback:项目的回调函数，支持两个参数，分别是项目节点本身和该项目参数
使用方法
插件运行方式有两种：
- ax*属性：对按钮使用
axDropdown属性和content属性，点击按钮即可按默认参数运行插件。 - js实例：通过
new axDropdown('#id',{参数})方式创建实例，通过点击事件运行该实例。
-
<a href="###" class="ax-btn" axDropdown='content:"伟大的中国"'>使用属性创建菜单</a> <a href="###" class="ax-btn" id="btnjs">使用JS创建菜单</a> -
new axDropdown('#btnjs',{ content:[{label:"中国"},{label:"新加坡"}], });
列表类型
通过type参数设置窗口的内容类型，content参数则设置内容格式；插件默认以list类型运行，创建无按钮的信息列表，content支持的格式如下：
- 数组：支持参数label、url、target、prefix、suffix、disabled，自动创建列表装入窗口
- DOM节点：将取得DOM节点的innerHTML作为窗口内容
- 选择器字符串：包括#id、.classname、NODE、[name]，将取得DOM节点的innerHTML作为窗口内容
- 其他字符串：窗口将直接展示该字符串
-
<a href="###" class="ax-btn" axDropdown='content:[{label:"中国"},{label:"新加坡"}]'>数组</a> <a href="###" class="ax-btn" id="dom">从DOM节点选择内容</a> <a href="###" class="ax-btn" axDropdown='content:"#country"'>从id节点选择内容</a> <a href="###" class="ax-btn" axDropdown='content:"伟大的中国"'>其他字符串</a> <div id="country" style="display: none;"> <a href="###" class="ax-bulletin"> <span class="ax-bulletin-body">马来西亚</span> </a> <hr/> <a href="###" class="ax-bulletin"> <span class="ax-bulletin-body">美国</span> </a> <hr/> <a href="###" class="ax-bulletin"> <span class="ax-bulletin-body">新西兰</span> </a> <hr/> <a href="###" class="ax-bulletin"> <span class="ax-bulletin-body">中国</span> </a> </div> -
new axDropdown('#dom',{ content:'#country', });
多样化列表
通过break参数设置是否使用项目分割线，默认为true即使用分割线，可使用false不使用分割线；可通过nowrap参数设置是否换行，默认true不换行，可使用false强行换行显示；可通过node参数设置项目的节点名，默认是a，可选择div等；通过prefix参数设置三种类型前缀；通过disabled参数设置是否禁用，默认false不禁用，可选择true强制禁用。
<a href="###" class="ax-btn" axDropdown='content:[{label:"中国"},{label:"新加坡"}],breakShow:false'>不使用分割线的菜单</a>
<a href="###" class="ax-btn" axDropdown='content:
[{label:"中国",url:"https://www.gov.cn/",target:"_blank",suffix:"85次",prefix:{type:"legend",data:"ax-icon-earth-f"}},
{label:"新加坡",url:"https://www.gov.sg/",target:"_blank",suffix:"63次",prefix:{type:"avatar",data:"https://src.axui.cn/v2.0/public/images/head01.jpg"},disabled:true},
{label:"新加坡",url:"https://www.gov.sg/",target:"_blank",suffix:"58次",prefix:{type:"image",data:"https://src.axui.cn/v2.0/public/images/china01.jpg"}}]
'>完整内容的列表菜单</a>
<a href="###" class="ax-btn" axDropdown='content:[{label:"南航与英航签署联营合作协议代码共享"},{label:"西班牙斗牛与逗牛，精彩各不同"}],nowrap:false'>可换行的菜单</a>
<a href="###" class="ax-btn" axDropdown='content:[{label:"中国"},{label:"新加坡"}],node:"div"'>DIV项目的菜单</a>
列表前缀
根据以上参数列举三种前缀列表。
<a href="###" class="ax-btn" axDropdown='content:"#legend"'>图标菜单</a>
<a href="###" class="ax-btn" axDropdown='content:"#avatar"'>头像菜单</a>
<a href="###" class="ax-btn" axDropdown='content:"#image"'>图片菜单</a>
<div id="legend" style="display: none;">
<a href="###" class="ax-bulletin">
<i class="ax-iconfont ax-icon-heart" legend></i>
<span class="ax-bulletin-body">马来西亚</span>
<i count>85次</i>
</a>
<hr/>
<a href="###" class="ax-bulletin">
<i class="ax-iconfont ax-icon-trash" legend></i>
<span class="ax-bulletin-body">美国</span>
<i count>65次</i>
</a>
<hr/>
<a href="###" class="ax-bulletin">
<i class="ax-iconfont ax-icon-earth" legend></i>
<span class="ax-bulletin-body">新西兰</span>
<i count>34次</i>
</a>
<hr/>
<a href="###" class="ax-bulletin">
<i class="ax-iconfont ax-icon-lock" legend></i>
<span class="ax-bulletin-body">中国</span>
<i count>78次</i>
</a>
</div>
<div id="avatar" style="display: none;">
<a href="###" class="ax-bulletin">
<span avatar><img src="<?=$dist?>images/avatar.svg" /></span>
<span class="ax-bulletin-body">马来西亚</span>
<i count>85次</i>
</a>
<hr/>
<a href="###" class="ax-bulletin">
<span avatar><img src="" /></span>
<span class="ax-bulletin-body">美国</span>
<i count>65次</i>
</a>
<hr/>
<a href="###" class="ax-bulletin">
<span avatar><img src="<?=$public?>images/head01.jpg" /></span>
<span class="ax-bulletin-body">新西兰</span>
<i count>34次</i>
</a>
<hr/>
<a href="###" class="ax-bulletin">
<span avatar><img src="<?=$public?>images/head02.jpg" /></span>
<span class="ax-bulletin-body">中国</span>
<i count>78次</i>
</a>
</div>
<div id="image" style="display: none;">
<a href="###" class="ax-bulletin">
<span image><img src="<?=$public?>images/china01.jpg" /></span>
<span class="ax-bulletin-body">马来西亚</span>
<i count>85次</i>
</a>
<hr/>
<a href="###" class="ax-bulletin">
<span image><img src="" /></span>
<span class="ax-bulletin-body">美国</span>
<i count>65次</i>
</a>
<hr/>
<a href="###" class="ax-bulletin">
<span image><img src="<?=$public?>images/china02.jpg" /></span>
<span class="ax-bulletin-body">新西兰</span>
<i count>34次</i>
</a>
<hr/>
<a href="###" class="ax-bulletin">
<span image><img src="<?=$public?>images/china03.jpg" /></span>
<span class="ax-bulletin-body">中国</span>
<i count>78次</i>
</a>
</div>
html类型
list类型可以创建列表窗口，当然也是可以创建纯文本窗口的；对于axDropdown我们使用html类型创建纯文本窗口。
<a href="###" class="ax-btn" axDropdown='type:"html",content:"伟大的中国"'>纯文本</a>
<a href="###" class="ax-btn" axDropdown='type:"html",content:"#html"'>html文本</a>
<div id="html" style="display: none;">
<span style="color:red">伟大的中国</span>
</div>
checkbox类型
通过type:checkbox来创建复选列表窗口，用于快速多选值，如果目标节点是input表单域，那么表单域将于checkbox列表联动，并且将input表单域设为只读。
复选列表是使用axCheckbox插件创建，所以可以设定plugin参数初始化axCheckbox插件的参数；在axDropdown中对axCheckbox强制使用了display:block参数。
设置content值即为设置axCheckbox的值，建议对checkbox类型使用数组数据。关于axCheckbox的用法请点击这里查看。
-
<a href="###" class="ax-btn" id="checkbox">打开checkbox列表</a> <input type="text" id="checkInput" placeholder="联动checkbox" style="width:300px" /> -
let data = [ { value: 'military', label: '军事类' }, { value: 'figure', label: '人物类' }, { value: 'literature', label: '文学类' }, { value: 'novel', label: '小说类' } ]; new axDropdown('#checkbox',{ type:'checkbox', content:data, }); new axDropdown('#checkInput',{ type:'checkbox', content:data, });
radio类型
radio类型可创建单选列表，与checkbox类型用法相同，均使用axCheckbox插件创建列表。
-
<a href="###" class="ax-btn" id="radio">打开radio列表</a> <input type="text" id="radioInput" placeholder="联动radio" style="width:300px" /> -
let data = [ { value: 'military', label: '军事类' }, { value: 'figure', label: '人物类' }, { value: 'literature', label: '文学类' }, { value: 'novel', label: '小说类' } ]; new axDropdown('#radio',{ type:'radio', content:data, }); new axDropdown('#radioInput',{ type:'radio', content:data, });
输入域类型
使用type:text或type:textarea可创建单行或多行表单域窗口，因输入域是使用axInput插件创建，所以可设置plugin参数配置axInput。关于axInput的用法请点击这里查看。
如果目标也是输入域那么将接收axInput创建的值。
-
<a href="###" class="ax-btn" id="input">单行输入</a> <input type="text" id="textarea" placeholder="多行输入" style="width:300px" /> -
new axDropdown('#input',{ type:'text', }); new axDropdown('#textarea',{ type:'textarea', });
数字类型
使用type:number可创建数字表单域窗口，因数字域是使用axAmount插件创建，所以可设置plugin参数配置axAmount。关于axAmount的用法请点击这里查看。
如果目标是输入域那么将接收axAmount创建的值。
-
<a href="###" class="ax-btn" id="amountBtn">输入数字</a> <input type="text" id="amountInput" style="width:300px"/> -
new axDropdown('#amountBtn', { type: 'number', }); new axDropdown('#amountInput', { type: 'number', });
按钮类型
通过type:button设置按钮列表，虽说是按钮列表，其中本质还是list类型，外在形态一致，button类型区别于list在于其每一项均可设定一个值，如果目标时输入表单域，那么可以将该值赋与目标。
-
<a href="###" class="ax-btn" id="button">打开按钮列表</a> <input type="text" id="buttonInput" placeholder="打开按钮列表" style="width:300px" /> -
let data = [ { value: 'military', label: '军事类' }, { value: 'figure', label: '人物类' }, { value: 'literature', label: '文学类' }, { value: 'novel', label: '小说类' } ]; new axDropdown('#button',{ type:'button', content:data, }); new axDropdown('#buttonInput',{ type:'button', content:data, });
初始化
通过设置plugin.value参数可初始化实例；对于text、textarea、checkbox、radio和button类型可使用初始化设置，需要注意几个事项：
- 1、如果plugin.value有值，那么内置变量this.initValue将等于plugin.value。
- 2、如果目标节点是input或textarea表单域，而且已经有了值，那么将以此作为axDropdown的初始值。
- 3、如果目标节点是input或textarea表单域，但是为空值，而plugin.value有值，则将该值赋予目标节点。
-
<a href="###" class="ax-btn" id="initButton">打开按钮列表</a> <input type="text" id="initInput" value="figure" style="width:300px" /> -
let data = [ { value: 'military', label: '军事类' }, { value: 'figure', label: '人物类' }, { value: 'literature', label: '文学类' }, { value: 'novel', label: '小说类' } ]; new axDropdown('#initButton',{ type:'button', content:data, plugin:{ value:'figure' } }); new axDropdown('#initInput',{ type:'checkbox', content:data, });
操作方法
axDropdown插件中内置若干变量，解释如下：
this.popup：创建axDropdown实例时的popup实例this.plugin：创建axDropdown实例时使用的插件实例，checkbox、radio、text和textarea类型下可使用该参数this.value：实例的输出值（带分隔符的字符串），checkbox、radio、text和textarea类型下可使用该参数this.valueArr：实例的输出值（数组），checkbox、radio、text和textarea类型下可使用该参数this.initValue：插件初始值，默认等于参数initValue值（默认为空），如果目标节点是input或textarea，那么将取其值存为初始值this.targetDom：绑定axDropdown实例的目标节点this.list：列表节点对象，是个数组，格式为[props:{},dom:'']，props为单项的属性复制而来，dom为项目节点，list和button类型有效
由于axDropdown实例是基于其他插件比如axPopup、axCheckbox、axInput创建，所以也可以使用这些插件自身的内置变量。
axDropdown插件中内置若干操作方法，解释如下：
this.setToHide(value)：向目标节点设置value值并关闭窗口，如果value为空则将目标节点值设为内置变量this.value；checkbox、radio、button、text和textarea类型下有效this.getValues(type)：获得实例值，支持一个参数type：默认为string，也就是说this.getValues()===this.value；如果需要获得数组格式，使用type='array'。this.updateValues(value)：向项实例设置值，可以是数组或字符串；checkbox、radio、button、text和textarea类型下有效this.updateToShow(value)：向项实例设置值并打开窗口，可以是数组或字符串；checkbox、radio、button、text和textarea类型下有效this.show(callback)：气泡打开，支持一个参数即回调函数，回调无参数this.hide(callback)：气泡关闭，支持一个参数即回调函数，回调无参数this.updateContent(data,callback)：更新内容（重置），支持两个参数，说明如下：- data：更新内容，格式如content参数一致
- callback：回调函数，无参数
由于axDropdown实例是基于其他插件比如axPopup、axCheckbox、axInput创建，所以也可以使用这些插件自身的操作方法。
-
<input type="text" id="operate" placeholder="打开选择..." style="width:300px" /> <a href="###" class="ax-btn" id="openOpt">打开</a> <a href="###" class="ax-btn" id="closeOpt">关闭</a> <a href="###" class="ax-btn" id="getValue">获得当前值</a> <a href="###" class="ax-btn" id="selectOne">选中“军事类”</a> <a href="###" class="ax-btn" id="selectShow">打开并选中“小说类”</a> <a href="###" class="ax-btn" id="updateContent">更新内容</a> -
let data = [ { value: 'military', label: '军事类' }, { value: 'figure', label: '人物类' }, { value: 'literature', label: '文学类' }, { value: 'novel', label: '小说类' } ]; let optIns = new axDropdown('#operate', { type: 'checkbox', content: data, popup: { pageClose: false, } }), openOpt = document.querySelector('#openOpt'), closeOpt = document.querySelector('#closeOpt'), selectOne = document.querySelector('#selectOne'), getValue = document.querySelector('#getValue'), selectShow = document.querySelector('#selectShow'), updateContent = document.querySelector('#updateContent'); openOpt.onclick = () => { optIns.popup.show(); console.log('打开了！'); console.log(optIns.targetDom) } closeOpt.onclick = () => { optIns.setToHide(); console.log('关闭了！'); console.log(optIns.value); console.log(optIns.getValues('array')); } selectOne.onclick = () => { optIns.updateValues('military'); } getValue.onclick = () => { console.log(optIns.getValues('array')); } selectShow.onclick = () => { optIns.updateToShow('novel'); } updateContent.onclick = () => { optIns.updateContent([ { value: 'bj', label: '北京市' }, { value: 'sh', label: '上海市' }, { value: 'gz', label: '广州市' }, { value: 'sz', label: '深圳市' } ]); }
监听事件
本插件有若干监听方法，以on为关键字，实例后监听和在参数中监听效果相同。格式是：instance.on('event',function(){})；具体事件说明如下：
onInit初始化后执行，无参数onBeforeSet设置值之前执行，支持value参数onAfterSet/set设置值之后执行，支持value参数onConfirm/confirm点击确认按钮之后执行，checkbox、radio、text、textarea类型有效onUpdateContent/updateContent内容之后执行，无参数
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<input type="text" id="on" placeholder="打开选择..." style="width:300px" /> -
let optOn = new axDropdown('#on', { type: 'checkbox', onBeforeSet: function (value) { let _this = this; new axDialog({ content: `确定赋值“${value}”么？`, confirm: { callback: function () { _this.setToHide(); } } }).show(); }, onInit: () => { console.log('初始化完成！'); }, content: data, }); optOn.on('set', (value) =>{ console.log(`“${value}”已经填入！`); }).on('confirm', (value) =>{ console.log('点击了确认按钮！'); });
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axDropdown(element,{
type: 'list',//气泡内容类型，可选择checkbox、radio、botton、list、text、textarea、html
content: '',//气泡内容，可以是字符串，#id、className、节点或数组
node: 'a',//列表项目节点名，默认是a标签，可选择div等
nowrap: true,//超出是否省略显示（一行显示不完以...结尾），默认true省略，可选择false多行显示
breakShow: true,//是否显示分割线，默认true显示，可选择false不显示
arrowShow: true,//是否给按钮右方显示指示小箭头，默认为true显示，可选择false不显示
grid: {
enable: false,//是否将展示方式设为grid布局，默认false不使用grid，可选择true开启
columns: 0,//设置一行几列，默认为0即不设置，如设为2表示一行两列
fenceShow: false,//是否启用项目之间的1px边距，默认false不启用，可选择true启用
},//设置grid布局，对使用content参数类型有效
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onInit: '',//回调函数，初始化后执行，无参数
onBeforeSet: '',//回调函数，赋值给input之前执行（target是一个input），支持参数value；可赋值类型中有效
onAfterSet: '',//回调函数，赋值给input之后执行（target是一个input），支持参数value；可赋值类型中有效
onConfirm: '',//回调函数，点击确认按钮后的回调，支持参数value；有窗口底部按钮类型有效
plugin: {
value: '',//插件初始值
},//使用子插件自身的参数，包括axCheckbox、axInput、axTree等
popup: {
in: 'slideDown',//默认下拉动画显示
out: 'slideUp',//默认上收动画关闭
size: 'sm',//默认小尺寸气泡
placement: 'bottom-start',//默认气泡在目标下方居左
close: false,//默认不使用气泡右上角关闭按钮
},//popup插件的参数
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"