combo-select是一款jQuery支键盘控制和列表选项搜索的下拉列表框jQuery插件。该下拉列表框插件支持键盘控制,支持在列表选项中进行搜索过滤。在移动数据和平板电脑上会回退为原生的select列表框。它的特点有:
- 可以对下拉列表选项进行搜索过滤。
- 对移动手机和平板电脑友好(回退为原生select下拉框)
- 可以使用键盘来控制
- 样式可以完全自定义
- 支持dada属性
- 支持数字和字符串两种数据类型
- 支持隐含的
style
属性
使用方法
HTML结构
使用普通的下拉列表框结构即可:
<select data-theme="bootstrap"> <option value="">Select value</option> <option>1</option> <option>2</option> </select>
初始化插件
$('select').comboSelect({ comboClass : 'combo-select', /* outer container class */ comboArrowClass : 'combo-select-arrow', /* arrow class */ comboDropDownClass : 'combo-drop-down', /* dropdown class */ inputClass : 'combobox-input text-input', /* Input element class */ disabledClass : 'option-disabled', /* Disabled class */ hoverClass : 'option-hover', /* dropdown list hover class */ selectedClass : 'option-selected', /* dropdown list selected class */ markerClass : 'combo-marker', /* Search marker class */ maxHeight : 200, /* Max height of dropdown */ themeClass : '', /* Theme using external classes */ extendStyle : true /* Copy all inline styles from original select */ })
普通的select下拉框进过转换后得到下面的HTML代码:
<div class="combo-select"> <select name="month" tabindex="-1"> </select> <div class="combo-select-arrow"></div> <ul class="combo-drop-down"> <li>....</li> </ul> <input type="text" placeholder="Select Month" class="combobox-input text-input"> </div>
配置参数
- comboClass:包裹容器的class名称。
- comboArrowClass:下拉框箭头的class名称。
- comboDropDownClass:下拉列表的class名称。
- inputClass:input元素的class名称。
- disabledClass:禁用状态时的class名称。
- hoverClass:鼠标滑过时的class名称。
- selectedClass:被选择的下拉列表的class名称。
- markerClass:搜索标签的class名称。
- maxHeight:下拉列表的最大高度。
- themeClass:使用外部主题的class名称。
- extendStyle:是否从原生select下拉列表框中复制所有的内联样式。
浏览器兼容
- Internet Explorer IE 8+
- Chrome
- Firefox
- Opera
- Safari
- iOS
- Android
- IE Mobile
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!