个性化阅读
专注于IT技术分析

RichFaces rich:inputNumberSlider

本文概述

它提供了一个用于更改数值的滑块。通过从滑块的范围中选择来选择数值。

我们可以通过设置最小值和最大值来指定范围。默认情况下, 最小值设置为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>

输出

RichFaces Inplacenumberslider 1

滑动滑块后, 输入值更改。

RichFaces Inplacenumberslider 2

赞(0) 打赏
未经允许不得转载:srcmini » RichFaces rich:inputNumberSlider
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏