本文概述
这是一个多功能的固定位置面板。用于显示通知栏。默认情况下, 它显示在顶部。我们可以通过指定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>
输出
评论前必须登录!
注册