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

PrimeFaces slider用法

本文概述

它是带有滑块的文本输入。它用于在滑块的帮助下获得用户输入。它允许我们使用滑块增加和减少输入。 <p:slider>组件用于创建滑块输入文本。它还具有下表列出的各种属性。

滑块属性

Attribute Default value Type Description
minValue 0 Integer 用于设置滑块的最小值。
maxValue 100 Integer 用于设置滑块的最大值。
style null String 它用于设置容器元素的内联CSS。
animate true Boolean 它需要布尔值来设置启用或禁用动画功能。
type horizontal String 用于设置滑块的类型。无论是水平还是垂直。
step 1 Integer 用于设置滑块的步骤。
disabled 0 Boolean 用于禁用滑块。它需要布尔值。
onSlideStart null String 它用于在滑块启动事件上调用客户端脚本。
onSlideEnd null String 它在幻灯片末尾执行客户端脚本。
range false Boolean 它用于提供范围。
displayTemplate null String 这是一个字符串模板。

例子

在下面的示例中, 我们正在实现<p:slider>组件。本示例包含以下文件。

JSF文件

// slide.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>Input Slider</title>
</h:head>
<h:body>
<h:form>
<p:growl id="growl" showDetail="true" />
<h3 style="margin-top: 0">PrimeFaces InputText Slider</h3>
<h:panelGrid columns="1" style="margin-bottom: 10px">
<p:inputText id="user-name" value="#{slider.value}" />
<p:slider for="user-name" />
</h:panelGrid>
<br/>
<p:commandButton value="Submit" />
</h:form>
</h:body>
</html>

ManagedBean

// Slider.java

package com.srcmini;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class Slider {
private int value;
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
}

输出

PrimeFaces slider1
PrimeFaces slider2
赞(0) 打赏
未经允许不得转载:srcmini » PrimeFaces slider用法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

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

微信扫一扫打赏