srcmini本文概述
它提供了一个用于更改数值的滑块。通过从滑块的范围中选择来选择数值。
我们可以通过设置最小值和最大值来指定范围。默认情况下, 最小值设置为0, 最大值设置为100。滑块带有最小和最大边界值标记, 并且在滑动滑块时显示了显示当前值的工具提示。
样式类和皮肤参数
下表包含style类(选择器)和inputNumberSlider的相应外观参数。
| Class | Function | 皮肤参数 | 映射的CSS属性 |
|---|---|---|---|
| .rf-insl | 它用于定义数字滑块本身的样式。 | 没有皮肤参数。 | |
| .rf-insl-trc | 它用于定义数字滑块轨道的样式。 | controlBackgroundColor面板BorderColor | background-color border-bottom-color |
| .rf-insl-trc-cntr | 它用于为数字滑块轨道的容器定义样式。 | 没有皮肤参数。 | |
| .rf-insl-mn | 它用于定义数字滑块上最小标签的样式。 | generalSizeFont generalFontFont | font-size font-family |
| .rf-insl-mx | 它用于定义数字滑块上最大标签的样式。 | generalFamilyFont generalTextColor | font-family color |
| .rf-insl-inp | 它用于定义数字滑块上输入字段的样式。 | generalFamilyFont generalTextColor | 字体系列颜色 |
| .rf-insl-inp-cntr | 它用于为输入字段的容器定义样式。 | 没有皮肤参数。 | |
| .rf-insl-hnd | 它用于定义数字滑块上手柄的样式。 | 没有皮肤参数。 | |
| .rf-insl-hnd-cntr | 它用于定义手柄容器的样式。 | 没有皮肤参数。 | |
| .rf-insl-hnd-sel | 选定后, 用于定义手柄的样式。 | 没有皮肤参数。 | |
| .rf-insl-hnd-dis | 选定后, 用于定义手柄的样式。 | 没有皮肤参数。 | |
| .rf-insl-dec, .rf-insl-inc | 这些类为步骤控件定义样式, 以减少和增加数量。 | 没有皮肤参数。 | |
| .rf-insl-dec-sel, .rf-insl-inc-sel | 这些类在选择时定义了步骤控件的样式。 | 没有皮肤参数。 | |
| .rf-insl-dec-dis, .rf-insl-inc-dis | 这些类在禁用时定义了步骤控件的样式。 | 没有皮肤参数。 | |
| .rf-insl-tt | 它用于为数字滑块上的工具提示定义样式。 | generalSizeFont generalFamilyFont | font-size font-family |
例子
在下面的示例中, 我们正在实现<rich：inputNumberSlider>组件。本示例包含以下文件。
JSF文件
// input-number-slider.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 Range"></h:outputText><br/><br/>
<rich:inputNumberSlider
minValue="10"
maxValue="100"
showArrows="true"
showTooltip="false"
step="5"
>
</rich:inputNumberSlider>
</h:form>
</h:body>
</f:view>
</ui:composition>输出
滑动滑块后, 输入值更改。
评论前必须登录！
注册