PrimeFaces旋钮Knob _旋钮

本文概述

旋钮属性
例子

【PrimeFaces旋钮Knob】它是用于获取数字值的输入组件。它用于获取指定范围内的用户输入。 PrimeFaces提供了< p：knob> 组件, 该组件用于创建图形圆。我们可以从中选择任何数值。它还提供了下表中列出的各种属性。
旋钮属性

Attribute	Default value	Type	Description
Value	null	Object	用于设置组件的值。
required	false	Boolean	用于根据需要标记组件。
min	0	Integer	它代表组件的最小有效值。
max	100	Integer	用于设置组件的最大有效值。
step	1	Integer	用于设置组件的增/减步长。
thickness	null	Float	用于设置钢筋的厚度。
width	auto	String	用于设置组件的宽度。
height	auto	String	用于设置组件的高度。
foregroundColor	null	Object	用于设置组件的前景色。
backgroundColor	null	Object	用于设置组件的背景色。
colorTheme	null	String	用于设置旋钮的主题。
disabled	false	Boolean	它禁用输入元素。
showLabel	true	Boolean	用于隐藏/显示标签。
cursor	false	Boolean	设置为true时, 仅显示光标, 而不显示完整条。
labelTemplate	{value}	String	进度值的模板。

例子在下面的示例中, 我们正在实现< p：knob> 组件。本示例包含以下文件。
JSF文件
// toggle.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"> < html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui"> < h:head> < title> Knobs< /title> < /h:head> < h:body> < h:form> < p:growl autoUpdate="true"/> < h3 style="margin-top:0"> Provide input in Range< /h3> < div class="knob-container ui-corner-all"> < p:knob value="http://www.srcmini.com/#{knob.value}"> < p:ajax listener="#{knob.onChange}"/> < /p:knob> < /div> < /h:form> < /h:body> < /html>

ManagedBean
// Knob.java

package com.srcmini; import java.io.Serializable; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.context.FacesContext; @ManagedBean public class Knob implements Serializable { private int value = http://www.srcmini.com/30; public int getValue() { return value; } public void setValue(int value) { this.value = value; } public void onChange(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO,"You have selected: " + value, null)); } }

输出