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

PrimeFaces NotificationBar组件用法

本文概述

这是一个多功能的固定位置面板。用于显示通知栏。默认情况下, 它显示在顶部。我们可以通过指定position属性来设置它的位置。我们还可以设置通知栏的效果, 例如:淡入淡出或滑动。除了所有这些, 它还包含下表中列出的各种其他属性。

NotificationBar属性

Attribute 默认值 Type Description
id null String 它是组件的唯一标识符。
rendered true Boolean 它设置布尔值以指定组件的呈现。
binding null Object 它是一个映射到后备bean中的服务器端UIComponent实例的表达式。
style null String 用于设置容器元素的样式。
styleClass null String 它用于设置容器元素的styleClass。
position top String 用于设置钢筋的位置。
effect fade String 用于设置效果的名称。
effectSpeed normal String 用于设置效果的速度。
autoDisplay false Boolean 它用于设置面板在页面加载时显示。
widgetVar null String 它是客户端小部件的名称。

例子

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

JSF文件

// notificationBar.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>Notification Bar</title>
</h:head>
<h:body>
<p:notificationBar position="top" effect="fade" styleClass="top" widgetVar="notify">
<h:outputText value="This is a Primefaces notification." style="font-size:36px;" />
</p:notificationBar>
<p:graphicImage name="images/primefaces-logo.jpeg" /><br/><br/>
<p:commandButton value="Click for notification" onclick="PF('notify').show()" type="button" icon="ui-icon-arrow-1-s"/>
</h:body>
</html>

输出

PrimeFaces NotificationBar 1
PrimeFaces NotificationBar 2
赞(0)
未经允许不得转载:srcmini » PrimeFaces NotificationBar组件用法

评论 抢沙发

评论前必须登录!