srcmini本文概述
它是用于获取数字值的输入组件。它用于获取指定范围内的用户输入。 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="#{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 = 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));
}
}输出
评论前必须登录！
注册