Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器。通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择。
使用方法
使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css、jQuery和fm.selectator.jquery.js文件。
HTML结构
一个选项带图标级带分组选项的下拉列表的HTML结构如下:
初始化插件
在页面DOM元素加载完毕之后,可以通过selectator()方法来初始化该下拉列表插件。
你也可以直接使用标签来初始化它:
配置参数
其它可用的属性标签
通过使用data-left、data-right和data-subtitle标签你可以扩展下拉列表的显示信息。它们可以通过CSS来设置样式,CSS的前缀为:prefix_title、prefix_left、prefix_right和prefix_subtitle。这些数据都是纯HTML代码,所以你也可以使用图片代码。
上的代码会显示为类似下面的结构:
CSS类
class | 描述 |
prefix_element |
这是一个新的下拉列表框。它带有相同的额外class类:single 和 multiple ,它们用于设置是单选还是多选。另外 options-visible 和 options-hidden 用于设置选项是否可见 |
prefix_chosen_items | 被选择的选项的容器 |
prefix_chosen_item | 当前被选择的选项的容器 |
prefix_chosen_item_title | 当前被选择的选项的标题 |
prefix_chosen_item_left | 当前被选择的选项的左侧的内容 |
prefix_chosen_item_right | 当前被选择的选项的右侧的内容 |
prefix_chosen_item_subtitle | 当前被选择的选项的子标题 |
prefix_chosen_item_remove | 当前被选择的选项的移除按钮 |
prefix_input | This is the input box for the selectator. This is used together with options-visible or options-hidden to show and style it differently if it is a multiple selection box or a single selection box. |
prefix_textlength | 用于计算多项选择框中input的尺寸 |
prefix_options | 选项列表容器 |
prefix_group_header | 分组标题 |
prefix_group | 分组容器 |
prefix_option |
结果选项。它使用class active 来表明当前激活的选项 |
prefix_option_title | 结果选项的标题 |
prefix_option_left | 结果选项左侧的内容 |
prefix_option_right | 结果选项右侧的内容 |
prefix_option_subtitle | 结果选项右侧的子标题 |
prefix_dimmer | dimmer |
方法
方法 | 描述 |
refresh | 该方法用于刷新插件 |
destroy | 该方法用于销毁插件 |