Dropdown下拉菜单模块
dropdown下拉菜单模块是继承自popup模块,也就是说dropdown的参数格式与popup相同,dropdown下拉菜单模块强调的是通过创建列表并给目标节点传递checked值;该模块的列表结构是bullet;该模块支持多种列表形式,支持单选和多选列表。
简单使用
气泡快捷选择是对Popup模块的简单再次封装,简化了参数。
其运行方式有两种:
- 对元素追加
ax-dropdown
属性,必填content
参数即可。 - 以
id+new
的形式运行实例。
- 输出
- HTML
- JS
-
-
-
new ax.Dropdown('#demo01',{ content:'中华上下五千年!', })
纯文本
气泡装入纯文本的方式有几种:
- 直接对
content
参数传入纯文本即可,支持html标签 - 参数
content
使用DOM节点选择器,contType
填入'html'
- 输出
- HTML
- JS
-
-
-
new ax.Dropdown('#demo01',{ content:'中华上下五千年!', })
bullet列表字符串
如果配合content
和contType
获得是bullet列表字符串,将以文本形式插入气泡当中。
- 方法一:content直接传入字符串
- 方法二:content为节点或节点选择器,contType设为html
- 输出
- HTML
- JS
-
-
let str = document.querySelector('#tpldata').innerHTML; new ax.Dropdown('#fromstr',{ content:str, });
数据源配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
content | any | '' | 数据源 |
contType | string | 'text' | 数据类型 |
contData | object | {} | 请求数据 |
ajax | object | {} | 异步请求参数 |
显示配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
placement | string | 'bottom-start' | 相对位置 |
feature | 'button'/'tooltip'/'' | '' | 特殊组合类型 |
popup | object | {} | 弹窗模块参数 |
列表配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
listType | 'checkboxes'/'radios'/'select-single'/'select-multi'/'custom'/'' | '' | 列表类型 |
paddingless | boolean | false | 是否无内边距 |
hoverable | boolean | false | 是否支持悬停效果 |
divisible | boolean | false | 是否显示分割线 |
multiline | boolean | false | 是否多行显示 |
cols | number | 0 | 网格布局列数 |
lines | 'fluid'/'fence'/'' | '' | 项目间隔类型 |
节点配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
childSel | string | '[rep="label"]' | 子节点选择器 |
valKey | string | '' | 取值属性名 |
detectable | boolean | false | 是否校验值一致性 |