jQWidgets jqxDropDownList 主题属性介绍

jqxDropDownList 是一个基于 jQuery 的下拉列表插件，可用于在 Web 应用程序中创建和管理下拉列表。本文将介绍 jqxDropDownList 的主题属性及其用法。

主题属性

jqxDropDownList 主题属性控制下拉列表的外观，可定义不同状态下的背景颜色、边框样式、字体样式等。下面是 jqxDropDownList 可用的主题属性：

• width - 下拉列表宽度。
• height - 下拉列表高度。
• theme - 下拉列表主题。可选值有：'material', 'material-dark', 'material-purple', 'material-teal', 'bootstrap'，'classic' 等。
• autoDropDownHeight - 自动计算下拉列表高度，使其与列表项高度一致。
• autoOpen - 是否自动打开下拉列表。
• closeDelay - 下拉列表关闭延迟时间，单位毫秒。
• disabled - 是否禁用下拉列表。
• displayMember - 列表项的显示文本字段名。
• dropDownHorizontalAlignment - 下拉列表水平对齐方式，可选值有：'left'、'center'、'right'。
• dropDownVerticalAlignment - 下拉列表垂直对齐方式，可选值有：'top'、'center'、'bottom'。
• enableHover - 是否启用鼠标悬停效果。
• enableSelection - 是否启用列表项选中效果。
• filterable - 是否启用过滤器。
• filterHeight - 过滤器高度。
• filterPlaceHolder - 过滤器占位符。
• items - 列表项数据源。
• selectedIndex - 当前选中的列表项索引。
• source - 列表项数据源。
• valueMember - 列表项的值字段名。

用法

使用 jqxDropDownList 主题属性很简单，只需要在使用 jqxDropDownList 的 HTML 元素上添加相应的属性即可。例如，下面是一个使用 classic 主题的 jqxDropDownList：

<div id="jqxdropdownlist"></div>

$('#jqxdropdownlist').jqxDropDownList({
    width: 200,
    height: 30,
    theme: 'classic',
    autoDropDownHeight: true,
    autoOpen: true,
    closeDelay: 300,
    disabled: false
});

以上代码将创建一个 classic 主题、宽度为 200px、高度为 30px 的 jqxDropDownList，并自动计算下拉列表高度，自动打开列表，关闭延迟时间 300 毫秒，启用下拉列表。

参考资料

• jQuery Drop Down List