Dropdown下拉菜单模块

2024-06-30 11:16:48首发，3小时前更新

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,
                });