PrimeFaces 旋钮

17 Mar 2025 | 阅读 2 分钟

它是一个输入组件，用于获取数值。它用于在指定的范围内获取用户输入。 PrimeFaces提供了<p:knob>组件，用于创建一个图形化的圆形。我们可以从中选择任何数值。它还提供了如下表所示的各种属性。

旋钮属性

属性	默认值	类型	描述
值	null	Object	它用于设置组件的值。
必需	false	Boolean	它用于将组件标记为必需。
min	0	Integer	它表示组件的最小有效值。
max	100	Integer	它用于设置组件的最大有效值。
step	1	Integer	它用于设置组件的增量/减量步长。
厚度	null	Float	它用于设置条的厚度。
宽度	auto	String	它用于设置组件的宽度。
高度	auto	String	它用于设置组件的高度。
前景色	null	Object	它用于设置组件的前景色。
backgroundColor	null	Object	它用于设置组件的背景色。
颜色主题	null	String	它用于设置旋钮的主题。
disabled	false	Boolean	它禁用输入元素。
显示标签	true	Boolean	它用于隐藏/显示标签。
光标	false	Boolean	设置为true时，仅显示光标而不是完整的条。
标签模板	{value}	String	进度值的模板。

示例

在下面的示例中，我们正在实现<p:knob>组件。此示例包含以下文件。

JSF 文件

// knob.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="#{knob.value}">
<p:ajax listener="#{knob.onChange}"/>
</p:knob>
</div>
</h:form>
</h:body>
</html>

ManagedBean

// Knob.java

package com.javatpoint;
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 = 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));  
}  
}  

输出

下一个主题PrimeFaces Chips

PrimeFaces 旋钮

旋钮属性

示例

JSF 文件

ManagedBean

联系信息

关注我们

教程

面试题

在线编译器

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

PrimeFaces 教程

PrimeFaces Ajax

UI 组件

面试题

PrimeFaces 旋钮

旋钮属性

示例

JSF 文件

ManagedBean

相关帖子

PF Tooltip

PF SelectOneRadio

PF AreaChart

PF SplitButton

PF Chips

PF Editor

PF AutoComplete

PF AccordionPanel

PF InputText

PF FileUpload

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器