RichFaces <rich:inputNumberSpinner>

2025 年 3 月 17 日 | 阅读 1 分钟

此组件是一个单行输入字段，带有增加和减少数值的按钮。它用于使用提供的微调器输入值。可以使用键盘上相应的方向键或在字段中键入来更改值。

样式类和皮肤参数

下表包含 inputNumberSpinner 的样式类和相应的皮肤参数。

Class	函数	皮肤参数	映射的 CSS 属性
.rf-insp	它用于定义数字微调器本身的样式。	panelBorderColor	边框颜色
.rf-insp-inp	它用于定义数字微调器上输入字段的样式。	generalSizeFont generalFamilyFont	字体大小字体系列
.rf-insp-btns	它用于定义数字微调器上按钮的样式。	panelBorderColor	左边框颜色
.rf-insp-dec, .rf-insp-inc	这些类定义了用于减少和增加数字的步进控件的样式。	无皮肤参数。
.rf-insp-dec-dis, .rf-insp-inc-dis	这些类定义了禁用步进控件时的样式。	无皮肤参数。

示例

在此，在以下示例中，我们正在实现 <rich:inputNumberSpinner> 组件。此示例包含以下文件。

JSF 文件

// input-number-spinner.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>Input Number Slider Example</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="Select a value from the Spinner"></h:outputText><br/><br/>
<rich:inputNumberSpinner
minValue="10"
maxValue="100"
step="5"
>
</rich:inputNumberSpinner>
</h:form>
</h:body>
</f:view>
</ui:composition>

输出

单击微调器后，值已更改。

下一主题RichFaces <rich:select>

RichFaces <rich:inputNumberSpinner>

样式类和皮肤参数

示例

JSF 文件

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

RichFaces 教程

Ajax 组件

皮肤和主题

UI 组件

面试题

RichFaces <rich:inputNumberSpinner>

样式类和皮肤参数

示例

JSF 文件

相关帖子

rich:select

rich:inplaceSelect

rich:dropDownMenu

rich:tree

rich:inplaceInput

rich:panelMenu

rich:calendar

rich:progressBar

rich:autocomplete

rich:notifyMessage

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器