jQWidgets jqxFormattedInput 主题属性介绍

jQWidgets jqxFormattedInput 是一个功能强大的输入框组件，支持自定义格式和主题，让用户可以更加方便地输入数据。在这里，我们将着重介绍 jqxFormattedInput 的主题属性。

主题属性列表

jqxFormattedInput 组件主题属性如下：

| 属性名 | 类型 | 默认值 | 描述 | | :---------------- | :----------- | :------------ | :----------------------------------------------------------- | | disabled | Boolean | false | 是否禁用组件 | | height | String/Number| '' | 组件的高度 | | placeHolder | String | '' | 显示在输入框中的默认文本 | | promptChar | String | '_' | 当文本框未输入内容时光标位置的填充字符 | | readOnly | Boolean | false | 是否只读 | | rtl | Boolean | false | 是否使用从右到左的文本布局 | | textAlign | String | 'left' | 输入文本的对齐方式，可选值为：'left', 'right' 或 'center' | | textMode | String | 'defaultinput'| 输入模式，可选值为：'defaultinput', 'password' 或 'textarea' | | theme | String | 'light' | 组件主题，可选值为：'light' 或 'dark' | | width | String/Number| '' | 组件的宽度 |

主题定制

预定义主题

jqxFormattedInput 组件内置有两种不同的主题：'light' 和 'dark'。默认情况下，'light' 主题被应用。

$('#myFormattedInput').jqxFormattedInput({
    theme: 'light'
});

或者：

$('#myFormattedInput').jqxFormattedInput({
    theme: 'dark'
});

自定义主题

用户可以通过定义 CSS 样式来自定义 jqxFormattedInput 组件主题。下面是一个自定义主题的示例：

.jqxformattedinput-custom {
    background-color: #505050;
    border: 1px solid #F5F5F5;
    color: #F5F5F5;
}
.jqxformattedinput-custom .jqx-fill-state-normal {
    background-color: #505050;
}
.jqxformattedinput-custom .jqx-fill-state-hover,
.jqxformattedinput-custom .jqx-fill-state-pressed {
    background-color: #F5F5F5;
}

然后在初始化 jqxFormattedInput 组件时指定主题为自定义主题：

$('#myFormattedInput').jqxFormattedInput({
    theme: 'custom'
});

参考文献

• jQWidgets jqxFormattedInput 官方文档