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)); } }

输出
PrimeFaces旋钮Knob

文章图片
PrimeFaces旋钮Knob

文章图片

    推荐阅读