Drawer抽屉模块
drawer抽屉模块是bubble气泡模块，是class类，可被extend继承；该模块支持四个方向展示内容；支持同一方向多个drawer叠加显示；content支持多种数据格式，包括DOM、string、object、array、函数等；特别的该模块支持asycn异步获取内容并自动解析为列表。
简单使用
使用参数content填入文本值即可。
- 输出
- HTML
也可以通过id+new的方式创建实例。
- 输出
- HTML
- JS
-
-
-
new ax.Drawer('#demo01',{ content:'世界人民大团结万岁！' });
基础配置参数
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| heading | string | '' | 窗口标题 |
| divider | boolean | false | 是否显示标题分割线 |
| duration | number | 0 | 动画时长(ms) |
| autoDur | boolean | false | 是否自动计算动画时间 |
| asleep | boolean | false | 是否禁用show方法 |
| deadShow | boolean | false | 打开后是否禁止关闭 |
| keepShow | boolean | false | 是否只允许显示不允许关闭 |
| classes | string | '' | 窗口样式类 |
| zIndex | number | 0 | 窗口层级 |
| dedicated | boolean | false | 是否阻止与body联动滚动 |
Drawer专属配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| placement | 'left'/'right'/'top'/'bottom'/'max' | 'right' | 抽屉显示位置 |
| trigger | 'click'/'sticky'/'none' | 'click' | 抽屉触发方式 |
| size | 'sm'/'md'/'lg' | 'sm' | 抽屉尺寸 |
| offset | string | '100px' | 子层抽屉偏移距离 |
| mask.enable | boolean | true | 是否显示遮罩层 |
| mask.closable | boolean | true | 点击遮罩是否关闭窗口 |
| parent | string | '' | 父容器选择器 |
| wing.selector | string/array | '' | 触发元素选择器 |
| wing.actClass | string | '' | 触发按钮激活样式类 |
内容配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| content | any | '' | 数据源 |
| contType | 'text'/'html'/'image'/'video'/'audio'/'iframe'/ 'async'/'form'/'input'/'textarea'/'auto' |
'text' | 内容类型 |
| contData | object | {} | 请求数据或媒体属性 |
| ajax | object | {} | 异步请求参数 |
| actClass | string | 'opened' | 打开时目标节点添加的类名 |
| tplStr | string | '' | 模板字符串 |
| tplEng | function | null | 模板引擎 |
| canClick | function | null | 点击触发判断函数 |
内边距配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| padding.enable | boolean | true | 是否显示内边距 |
| padding.value | string | '' | 内边距类名 |
媒体配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| media.caption | string | '' | 媒体标题 |
| media.brief | string | '' | 媒体简介 |
自动填充配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| autoFill.enable | boolean | false | 是否自动填充 |
| autoFill.inputSel | string | '' | 填充节点选择器 |
| autoFill.childSel | string | '' | 子节点选择器 |
| autoFill.detectable | boolean | false | 是否允许反向取值 |
| autoFill.attr | string | '' | 填充节点属性 |
列表配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| bullet.enable | boolean | false | 是否启用列表模式 |
| bullet.type | 'checkboxes'/'radios'/'select-single'/'select-multi'/'custom' | 'custom' | 列表类型 |
| bullet.parentNode | string | 'ul' | 列表父节点名 |
| bullet.childNode | string | 'li' | 列表子节点名 |
| bullet.unpadded | boolean | false | 是否无内间距 |
| bullet.hoverable | boolean | false | 是否支持悬停效果 |
| bullet.divisible | boolean | false | 是否显示分割线 |
| bullet.multiline | boolean | false | 是否多行显示 |
| bullet.cols | number | 0 | 网格列数 |
| bullet.lines | 'fluid'/'fence'/'' | '' | 项目间隔类型 |
| bullet.action | function | null | 列表项处理函数 |
工具栏配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| tools.enable | boolean | true | 是否显示工具栏 |
| tools.placement | 'inside'/'outside' | 'inside' | 工具栏位置 |
| tools.children | array | ['close'] | 工具按钮列表 |
底部配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| footer.enable | boolean | true | 是否显示底部 |
| footer.layout | 'center'/'plain'/'right'/'left' | 'plain' | 按钮布局方式 |
| footer.note | boolean | false | 是否显示底部提示 |
| footer.divider | boolean | false | 是否显示底部分割线 |
| footer.padding | boolean | false | 是否显示内边距 |
| footer.children | array | ['cancel', 'confirm'] | 底部按钮列表 |
等待函数
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| b4Show | function | null | 显示前等待函数 |
| b4Hide | function | null | 隐藏前等待函数 |
| b4Fill | function | null | 填充前等待函数 |
| b4Confirm | function | null | 确认前等待函数 |
| b4Cancel | function | null | 取消前等待函数 |
回调函数
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| onShow | function | null | 显示前回调 |
| onHide | function | null | 隐藏前回调 |
| onShown | function | null | 显示后回调 |
| onHidden | function | null | 隐藏后回调 |
| onInvalidated | function | null | 表单验证失败回调 |
| onValidated | function | null | 表单验证成功回调 |
| onSended | function | null | 表单发送成功回调 |
| onRender | function | null | 渲染开始回调 |
| onRendered | function | null | 渲染完成回调 |
| onUpdatedCont | function | null | 内容更新回调 |
| onTransferred | function | null | 宿主节点更新回调 |
| onConfirmed | function | null | 确认按钮点击回调 |
| onCanceled | function | null | 取消按钮点击回调 |
| onClosed | function | null | 关闭按钮点击回调 |
| onCleared | function | null | 清除按钮点击回调 |
| onRequest | function | null | 异步请求完成回调 |
| onBulletsChecked | function | null | 列表checked回调 |
| onBulletsSelected | function | null | 列表selected回调 |
| onTargetSet | function | null | 目标节点填充回调 |
