📜  jQWidgets jqxNumberInput 主题属性(1)

📅  最后修改于: 2023-12-03 15:16:55.872000             🧑  作者: Mango

jQWidgets jqxNumberInput 主题属性

介绍

jQWidgets jqxNumberInput 是一个轻量级的数字输入组件,可以方便地在您的Web应用程序中实现数字输入。这个组件提供了多种主题属性,可以用来控制组件的外观和样式。

主题属性列表

以下是jQWidgets jqxNumberInput可用的主题属性列表:

| 属性名称 | 描述 | | ----------------------- | ------------------------------------------------------------ | | buttonSize | 按钮的大小。 | | disabled | 组件是否禁用。 | | height | 组件的高度。 | | inputMode | 组件的输入模式。 | | rtl | 组件是否支持从右到左的阅读顺序。 | | spinButtons | 是否启用组件的加减按钮。 | | spinButtonsDelay | 加减按钮增加或减少数字的速度。 | | spinButtonsInitialDelay | 从鼠标悬停在加减按钮上到数字开始增加或减少的时间间隔。 | | spinButtonsStep | 组件数字的增加或减少值。 | | template | 组件的HTML模板。 | | theme | 组件的主题名称。 | | value | 组件的默认值。 | | width | 组件的宽度。 | | DecimalDigits | 数字的小数位。 | | decimal | 小数点符号。 | | DecimalSeparatorPosition | 小数点的位置。 | | GroupSeparator | 分组符号。 | | groupSize | 每组数字的位数。 | | iPadKeyboardMode | iPad键盘输入模式。 | | min | 组件允许输入的最小值。 | | max | 组件允许输入的最大值。 | | negativeSymbol | 负数符号。 | | placeHolder | 组件的提示文本。 | | symbol | 组件的货币标志。 |

示例

以下示例演示如何使用一些主题属性来自定义jQWidgets jqxNumberInput的样式。

$("#jqxNumberInput").jqxNumberInput({
    width: '200px',
    height: '25px',
    inputMode: 'simple',
    spinButtons: true,
    theme: 'jqx-mytheme',
    min: 0,
    max: 100,
    value: 0
});

在上面的示例中,我们设置了以下属性:

  • width: 设置组件的宽度
  • height: 设置组件的高度
  • inputMode: 设置组件的输入模式
  • spinButtons: 启用组件的加减按钮
  • theme: 设置组件的主题名称
  • min: 允许输入的最小值为0
  • max: 允许输入的最大值为100
  • value: 组件的默认值为0
参考资料