primefaces_Primefaces菜单，MenuBar，MenuButton，TieredMenu，SlideMenu示例

最新推荐文章于 2024-09-01 07:25:58 发布
最新推荐文章于 2024-09-01 07:25:58 发布
阅读量720 收藏 1
点赞数
文章标签： 定位 java javascript vue html ViewUI
原文链接：https://www.journaldev.com/3622/primefaces-menu-menubar-menubutton-tieredmenu-slidemenu-example
版权

primefaces

The major aim of this tutorial is to cover the main menu components that get used with Primefaces implementation. Typically, a huge amount of applications spread over internet use a different form of menus. This tutorial will cover the following types of menu:

本教程的主要目的是介绍与Primefaces实现一起使用的主要菜单组件。 通常，分布在Internet上的大量应用程序使用不同形式的菜单。 本教程将介绍以下类型的菜单：

  • Menu: Is a navigation component with submenus and menu items.

    菜单 ：是带有子菜单和菜单项的导航组件。
  • MenuBar: Is a horizontal navigation component.

    MenuBar ：是一个水平导航组件。
  • MenuButton: Is used to display different commands in a popup menu.

    MenuButton ：用于在弹出菜单中显示不同的命令。
  • TieredMenu: Is used to display nested submenus with overlays.

    TieredMenu ：用于显示带有叠加层的嵌套子菜单。
  • SlideMenu: Is used to display nested submenus with sliding animation.

    SlideMenu ：用于显示带有滑动动画的嵌套子菜单。

Let’s get started explaining all of these menu types to see all of those featured functionalities that Primefaces provide for this kind of components.

让我们开始解释所有这些菜单类型，以了解Primefaces为此类组件提供的所有功能。

Primefaces菜单–基本信息 (Primefaces Menu – Basic Info)

Tagmenu
Component Classorg.primefaces.component.menu.Menu
Component Typeorg.primefaces.component.Menu
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.MenuRenderer
Renderer Classorg.primefaces.component.menu.MenuRenderer
标签 菜单
组件类别 org.primefaces.component.menu.Menu
组件类型 org.primefaces.component.Menu
组件族 org.primefaces.component
渲染器类型 org.primefaces.component.MenuRenderer
渲染器类 org.primefaces.component.menu.MenuRenderer

Primefaces菜单–属性 (Primefaces Menu – Attributes)

NameDefaultTypeDescription
idnullStringUnique identifier of the component.
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean.
widgetVarnullStringName of the client side widget.
modelnullMenuModelA menu model instance to create menu programmatically.
triggernullStringTarget component to attach the overlay menu.
mynullStringCorner of menu to align with trigger element.
atnullStringCorner of trigger to align with menu element.
overlayfalseBooleanDefines positioning type of menu, either static or overlay.
stylenullStringInline style of the main container element.
styleClassnullStringStyle class of the main container element.
triggerEventclickStringEvent to show the dynamic positioned menu.
名称 默认 类型 描述
ID 空值 串 组件的唯一标识符。
呈现 真正 布尔型 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑 空值 目的 一个el表达式，它映射到后备bean中的服务器端UIComponent实例。
widgetVar 空值 串 客户端小部件的名称。
模型 空值 菜单型号 用于以编程方式创建菜单的菜单模型实例。
触发 空值 串 目标组件将附加覆盖菜单。
我的 空值 串 菜单的一角与触发元素对齐。
在 空值 串 触发器的角与菜单元素对齐。
覆盖 假 布尔型 定义菜单的定位类型，静态或叠加。
样式 空值 串 主容器元素的内联样式。
styleClass 空值 串 主容器元素的样式类。
triggerEvent 点击 串 显示动态定位菜单的事件。

Primefaces菜单–入门 (Primefaces Menu – Getting Started)

A menu is composed of submenus and menuitems. Submenus are used to group menuitems, while menuitems correspond to those actions required. Following example shows you the most simplest use of Menu component.

菜单由子菜单和菜单项组成。 子菜单用于对菜单项进行分组，而菜单项则对应于所需的操作。 以下示例向您展示了最简单的Menu组件用法。

index.xhtml

index.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:menu>
		<p:submenu label="File">
			<p:menuitem value="Open"></p:menuitem>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About Primefaces"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menu>
</h:form>
</html>

Primefaces菜单–叠加菜单 (Primefaces Menu – Overlay Menu)

Menu can be positioned in two ways; static or dynamic. Static position means that the menu is in normal page flow. In contrast dynamic menus isn’t in the normal flow of the page allowing them to overlay other elements. For defining menu dynamically, you should pass through below steps:

菜单可以通过两种方式定位： 静态或动态。 静态位置表示菜单处于正常页面浏览状态。 相反，动态菜单不在页面的正常流程中，因此它们可以覆盖其他元素。 为了动态定义菜单，您应该通过以下步骤：

  • Define your menu normally by setting overlay attribute to true and associating the menu’s trigger attribute with the id of the triggered action. 

    通过将overlay属性设置为true并将菜单的trigger属性与id关联，通常可以定义菜单   触发动作。  
  • Tune both of my and at menu’s attribute for specifying the corner of the menu to align with trigger element and corner of trigger to align with menu element, respectively.

    调整my和at菜单的属性，分别指定要与触发元素对齐的菜单角和要与菜单元素对齐的触发角。
  • Pairs of left, right, bottom and top are the only values accepted for my and at attributes.

    成对的left，right，bottom和top是my和at属性唯一接受的值。

index1.xhtml

index1.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:menu overlay="true" trigger="triggerButton" my="left top" at="right top">
		<p:submenu label="File">
			<p:menuitem value="Open"></p:menuitem>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About Primefaces"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menu>
	<p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton>
</h:form>
</html>
  • Once Trigger Menu action has activated, your defined menu has been displayed.

    触发菜单操作激活后，将显示您定义的菜单。

Primefaces菜单– Ajax和非Ajax操作 (Primefaces Menu – Ajax and Non-Ajax Actions)

As now, you’ve developed a simple static menu and more complicated dynamic one. Both of these menus are containing menuitems that correspond to required actions that menu aim to provide. Those menuitems are actually actions likewise p:commandButton, so it’s also applicable for you to ajaxify them.

像现在一样，您已经开发了一个简单的静态菜单和一个更复杂的动态菜单。 这两个菜单都包含与菜单旨在提供的必需操作相对应的菜单项 。 这些菜单项实际上是与p：commandButton相同的动作，因此也适用于您将它们ajaxize。

index2.xhtml

index2.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:growl id="message"></p:growl>
	<p:menu overlay="true" trigger="triggerButton" my="left top" at="right top">
		<p:submenu label="File">
			<p:menuitem value="Open" action="#{menuManagedBean.openAction}" update="message"></p:menuitem>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About Primefaces"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menu>
	<p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton>
</h:form>
</html>

MenuManagedBean.java

MenuManagedBean.java 

package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class MenuManagedBean {
	public String openAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Open action has activiated asynchrounsly !"));
		return "";
	}
}

Primefaces菜单–动态菜单 (Primefaces Menu – Dynamic Menus)

Menus can be created programmatically as well, this is more flexible compared to the declarative approach. You can define like that menu by using org.primefaces.model.MenuModel instance. Components like p:submenu, p:menuitem and p:separator have also their default implementation that are used for define programmatic menu. Following example shows you the same business scenario that you’ve developed before, this time the menu will be rendered programmatically.

菜单也可以通过编程方式创建，与声明式方法相比，它更加灵活。 您可以使用org.primefaces.model.MenuModel实例来定义类似的菜单。 诸如p：submenu ， p：menuitem和p：separator之类的组件还具有用于定义程序化菜单的默认实现。 下面的示例向您展示了您之前开发的相同业务场景，这次菜单将以编程方式呈现。

index3.xhtml

index3.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:growl id="message"></p:growl>
	<p:menu overlay="true" trigger="triggerButton" my="left top" at="right top" model="#{menuManagedBean.menu}">
	</p:menu>
	<p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton>
</h:form>
</html>

MenuManagedBean.java

MenuManagedBean.java 

package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSeparator;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;

@ManagedBean
@SessionScoped
public class MenuManagedBean {
	private MenuModel menu = new DefaultMenuModel();

	public MenuManagedBean(){
		// Create submenu
		DefaultSubMenu file = new DefaultSubMenu("File");
		// Create submenu
		DefaultSubMenu help = new DefaultSubMenu("Help");
		// Create menuitem
		DefaultMenuItem open = new DefaultMenuItem("Open");
		// Create menuitem
		DefaultMenuItem edit = new DefaultMenuItem("Edit");
		// Create menuitem
		DefaultMenuItem exit = new DefaultMenuItem("Exit");

		// Create menuitem
		DefaultMenuItem about = new DefaultMenuItem("About Primefaces");
		// Create menuitem
		DefaultMenuItem contact = new DefaultMenuItem("Contact Us");
		// Create menuitem
		DefaultMenuItem helpMenuItem = new DefaultMenuItem("Help");		

		// Determine menuitem action
		open.setCommand("#{menuManagedBean.openAction}");

		// Associate menuitem with submenu
		file.addElement(open);
		file.addElement(edit);
		file.addElement(new DefaultSeparator());
		file.addElement(exit);

		help.addElement(about);
		help.addElement(contact);
		help.addElement(new DefaultSeparator());
		help.addElement(helpMenuItem);

		// Associate submenu with menu
		menu.addElement(file);
		menu.addElement(help);
	}

	public MenuModel getMenu() {
		return menu;
	}

	public void setMenu(MenuModel menu) {
		this.menu = menu;
	}

	public String openAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Open action has activiated asynchrounsly !"));
		return "";
	}
}

Primefaces菜单栏–基本信息 (Primefaces Menubar – Basic Info)

Menubar is a horizontal navigation component.

菜单栏是水平导航组件。

TagMenubar
Component Classorg.primefaces.component.menubar.Menubar
Component Typeorg.primefaces.component.Menubar
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.MenubarRenderer
Renderer Classorg.primefaces.component.menubar.MenubarRenderer
标签 菜单栏
组件类别 org.primefaces.component.menubar.Menubar
组件类型 org.primefaces.component.Menubar
组件族 org.primefaces.component
渲染器类型 org.primefaces.component.MenubarRenderer
渲染器类 org.primefaces.component.menubar.MenubarRenderer

Primefaces菜单栏–属性 (Primefaces Menubar – Attributes)

NameDefaultTypeDescription
idnullStringUnique identifier of the component.
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean.
widgetVarnullStringName of the client side widget
modelnullMenuModelMenuModel instance to create menus
programmatically
stylenullStringInline style of menubar
styleClassnullStringStyle class of menubar
autoDisplayfalseBooleanDefines whether the first level of submenus will be displayed on mouseover or not. When set to false, click event is required to display.
名称 默认 类型 描述
ID 空值 串 组件的唯一标识符。
呈现 真正 布尔型 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑 空值 目的 一个el表达式，它映射到后备bean中的服务器端UIComponent实例。
widgetVar 空值 串 客户端小部件的名称
模型 空值 菜单型号 MenuModel实例来创建菜单
以编程方式
样式 空值 串 菜单栏的内联样式
styleClass 空值 串 菜单栏的样式类
自动显示 假 布尔型 定义是否在鼠标悬停时显示第一级子菜单。 设置为false时，需要显示click事件。

Primefaces菜单栏–入门 (Primefaces Menubar – Getting Started)

Similar to Menu component, Menubar requires p:submenu and p:menuitem as a child to compose the menubar.

与菜单组件类似，菜单栏需要p：submenu和p：menuitem作为子项才能构成菜单栏。

Primefaces菜单栏–嵌套菜单 (Primefaces Menubar – Nested Menus)

Menubar supports nested menus, that is by providing a submenus within another parent submenus.

菜单栏支持嵌套菜单，即通过在另一个父子菜单中提供一个子菜单。

index5.xhtml

index5.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:menubar>
		<p:submenu label="File">
			<p:submenu label="Open">
				<p:menuitem value="Open Excel File"></p:menuitem>
				<p:menuitem value="Open Word File"></p:menuitem>
				<p:menuitem value="Open Power Point File"></p:menuitem>
			</p:submenu>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About JournalDev"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menubar>
</h:form>
</html>

Primefaces菜单栏–根​​菜单项 (Primefaces Menubar – Root Menuitem)

Menubar has also supported rooted menuitem, that is by providing a direct p:menuitem child component within p:menubar.

菜单栏还支持根目录菜单项，即通过在p：menubar中提供直接的p：menuitem子组件。

index6.xhtml

index6.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:menubar>
		<p:menuitem value="Open"></p:menuitem>
	</p:menubar>
</h:form>
</html>

Primefaces菜单栏– Ajax和非Ajax操作 (Primefaces Menubar – Ajax and Non-Ajax Actions)

Likewise p:commandButton component, p:menuitem has also supported ajaxifying actions. You’ve already experienced this in p:menu section. You can use p:menuitem for doing actions – Ajax and Non-Ajax – and navigation as well.
Following sample shows you the different usage of p:menuitem.

与p：commandButton组件类似，p：menuitem也支持Ajaxifying动作。 您已经在p：menu部分中体会到了这一点。 您可以使用p：menuitem执行操作-Ajax和Non-Ajax-以及导航。
以下示例向您展示了p：menuitem的不同用法。

index7.xhtml

index7.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
<p:growl id="message"></p:growl>
	<p:menubar>
		<p:submenu label="File">
			<p:submenu label="Open">
				<p:menuitem value="Ajax Action" action="#{menubarManagedBean.ajaxAction}" update="message"></p:menuitem>
				<p:menuitem value="Non Ajax Action" action="#{menubarManagedBean.nonAjaxAction}" ajax="false"></p:menuitem>
				<p:menuitem value="Go To JournalDev" url="https://www.journaldev.com"></p:menuitem>
			</p:submenu>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About JournalDev"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menubar>
</h:form>
</html>

MenubarManagedBean.java

MenubarManagedBean.java 

package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class MenubarManagedBean {
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

Primefaces菜单栏–动态菜单 (Primefaces Menubar – Dynamic Menus)

Menubar has also supported dynamic creation of it, you can create Menubar programmatically and providing Ajax, Non-Ajax and URL actions likewise you did in the Ajax and Non-Ajax actions section.

菜单栏还支持动态创建菜单栏，您可以以编程方式创建菜单栏，并提供Ajax，Non-Ajax和URL操作，就像在Ajax和Non-Ajax操作部分中所做的一样。

index8.xhtml

index8.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
<p:growl id="message"></p:growl>
	<p:menubar model="#{menubarManagedBean.menubar}">
	</p:menubar>
</h:form>
</html>

MenubarManagedBean.java

MenubarManagedBean.java 

package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSeparator;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;

@ManagedBean
@SessionScoped
public class MenubarManagedBean {

	private MenuModel menubar = new DefaultMenuModel();

	public MenubarManagedBean(){
		// Create submenus required
		DefaultSubMenu file = new DefaultSubMenu("File");
		DefaultSubMenu open = new DefaultSubMenu("Open");
		DefaultSubMenu help = new DefaultSubMenu("Help");

		// Create menuitems required
		DefaultMenuItem edit = new DefaultMenuItem("Edit");
		DefaultMenuItem exit = new DefaultMenuItem("Exit");

		// Create menuitems required
		DefaultMenuItem ajaxAction = new DefaultMenuItem("Ajax Action");
		ajaxAction.setUpdate("message");
		ajaxAction.setCommand("#{menubarManagedBean.ajaxAction}");

		DefaultMenuItem nonAjaxAction = new DefaultMenuItem("Non Ajax Action");
		nonAjaxAction.setAjax(false);
		nonAjaxAction.setCommand("#{menubarManagedBean.nonAjaxAction}");

		DefaultMenuItem urlAction = new DefaultMenuItem("Go To JournalDev");
		urlAction.setUrl("https://www.journaldev.com");

		DefaultMenuItem about = new DefaultMenuItem("About JournalDev");
		DefaultMenuItem contactUs = new DefaultMenuItem("Contact Us");
		DefaultMenuItem helpMenuItem = new DefaultMenuItem("Help");

		// Associate menuitems with open submenu
		open.addElement(ajaxAction);
		open.addElement(nonAjaxAction);
		open.addElement(urlAction);

		// Associate menuitems with help submenu
		help.addElement(about);
		help.addElement(contactUs);
		help.addElement(new DefaultSeparator());
		help.addElement(helpMenuItem);

		// Associate open submenu with file submenu
		file.addElement(open);
		file.addElement(edit);
		file.addElement(new DefaultSeparator());
		file.addElement(exit);

		// Associate submenus with the menubar
		this.menubar.addElement(file);
		this.menubar.addElement(help);

	}

	public MenuModel getMenubar() {
		return menubar;
	}

	public void setMenubar(MenuModel menubar) {
		this.menubar = menubar;
	}

	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

Primefaces MenuButton –基本信息 (Primefaces MenuButton – Basic Info)

MenuButton displays different commands in a popup menu.

MenuButton在弹出菜单中显示不同的命令。

TagmenuButton
Component Classorg.primefaces.component.menubutton.MenuButton
Component Typeorg.primefaces.component.MenuButton
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.MenuButtonRenderer
Renderer Classorg.primefaces.component.menubutton.MenuButtonRenderer
标签 menuButton
组件类别 org.primefaces.component.menubutton.MenuButton
组件类型 org.primefaces.component.MenuButton
组件族 org.primefaces.component
渲染器类型 org.primefaces.component.MenuButtonRenderer
渲染器类 org.primefaces.component.menubutton.MenuButtonRenderer

Primefaces MenuButton –属性 (Primefaces MenuButton – Attributes)

NameDefaultTypeDescription
idnullStringUnique identifier of the component.
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean.
valuenullStringLabel of the button
stylenullStringStyle of the main container element
styleClassnullStringStyle class of the main container element
widgetVarnullStringName of the client side widget
modelnullMenuModelMenuModel instance to create menus programmatically
disabledfalseBooleanDisables or enables the button.
iconPosleftStringPosition of the icon, valid values are left and right.
appendTonullStringAppends the overlay to the element defined by search expression. Defaults to document body.
名称 默认 类型 描述
ID 空值 串 组件的唯一标识符。
呈现 真正 布尔型 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑 空值 目的 一个el表达式，它映射到后备bean中的服务器端UIComponent实例。
值 空值 串 按钮的标签
样式 空值 串 主容器元素的样式
styleClass 空值 串 主容器元素的样式类
widgetVar 空值 串 客户端小部件的名称
模型 空值 菜单型号 MenuModel实例以编程方式创建菜单
残障人士 假 布尔型 禁用或启用按钮。
iconPos 剩下 串 图标的位置，有效值在左侧和右侧。
appendTo 空值 串 将叠加层附加到搜索表达式定义的元素上。 默认为文档正文。

Primefaces MenuButton –入门 (Primefaces MenuButton – Getting Started)

MenuButton consists of one or more menuitems. Those menuitems that would be defined have the same similarities as those already used before, Ajax, non-ajax and navigation actions are also supported here.

MenuButton包含一个或多个菜单项。 将要定义的那些菜单项与之前已经使用的菜单项具有相似之处，这里还支持Ajax，非ajax和导航操作。

index9.xhtml

index9.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:menuButton value="MenuButton">
		<p:menuitem value="Ajax Action" action="#{menuButtonManagedBean.ajaxAction}" update="message"></p:menuitem>
		<p:menuitem value="Non Ajax Action" action="#{menuButtonManagedBean.nonAjaxAction}" ajax="false"></p:menuitem>
		<p:menuitem value="Go To JournalDev" url="https://www.journaldev.com"></p:menuitem>
	</p:menuButton>
</h:form>
</html>

MenuButtonManagedBean.java

MenuButtonManagedBean.java 

package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSeparator;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;

@ManagedBean(name="menuButtonManagedBean")
@SessionScoped
public class MenuButtonManagedBean {
	private MenuModel menuButton = new DefaultMenuModel();

	public MenuButtonManagedBean(){

	}

	public MenuModel getMenuButton() {
		return menuButton;
	}

	public void setMenuButton(MenuModel menuButton) {
		this.menuButton = menuButton;
	}

	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

Primefaces MenuButton –动态菜单 (Primefaces MenuButton – Dynamic Menus)

MenuButton can be created programmatically as well. The same example of MenuButton that is provided in the previous section has actually implemented below using programmatic methodology.

MenuButton也可以通过编程方式创建。 上一节中提供的MenuButton的相同示例实际上已经在下面使用编程方法实现了。

index10.xhtml

index10.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:menuButton value="MenuButton" model="#{menuButtonManagedBean.menuButton}">
	</p:menuButton>
</h:form>
</html>

MenuButtonManagedBean.java

MenuButtonManagedBean.java 

package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.MenuModel;

@ManagedBean(name="menuButtonManagedBean")
@SessionScoped
public class MenuButtonManagedBean {
	private MenuModel menuButton = new DefaultMenuModel();

	public MenuButtonManagedBean(){

		// Create menuitems required
		DefaultMenuItem ajaxAction = new DefaultMenuItem("Ajax Action");
		ajaxAction.setUpdate("message");
		ajaxAction.setCommand("#{menubarManagedBean.ajaxAction}");

		DefaultMenuItem nonAjaxAction = new DefaultMenuItem("Non Ajax Action");
		nonAjaxAction.setAjax(false);
		nonAjaxAction.setCommand("#{menubarManagedBean.nonAjaxAction}");

		DefaultMenuItem urlAction = new DefaultMenuItem("Go To JournalDev");
		urlAction.setUrl("https://www.journaldev.com");

		this.menuButton.addElement(ajaxAction);
		this.menuButton.addElement(nonAjaxAction);
		this.menuButton.addElement(urlAction);

	}

	public MenuModel getMenuButton() {
		return menuButton;
	}

	public void setMenuButton(MenuModel menuButton) {
		this.menuButton = menuButton;
	}

	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

Primefaces TieredMenu –基本信息 (Primefaces TieredMenu – Basic Info)

TieredMenu is used to display nested submenus with overlays.

TieredMenu用于显示带有叠加层的嵌套子菜单。

TagTieredMenu
Component Classorg.primefaces.component.tieredmenu.TieredMenu
Component Typeorg.primefaces.component.TieredMenu
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.TieredMenuRenderer
Renderer Classorg.primefaces.component.tieredmenu.TieredMenuRenderer
标签 分层菜单
组件类别 org.primefaces.component.tieredmenu.TieredMenu
组件类型 org.primefaces.component.TieredMenu
组件族 org.primefaces.component
渲染器类型 org.primefaces.component.TieredMenuRenderer
渲染器类 org.primefaces.component.tieredmenu.TieredMenuRenderer

Primefaces TieredMenu –属性 (Primefaces TieredMenu – Attributes)

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
widgetVarnullStringName of the client side widget.
modelnullMenuModelMenuModel instance for programmatic menu.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the component.
autoDisplaytrueBooleanDefines whether the first level of submenus will be displayed on mouseover or not. When set to false, click event is required to display.
triggernullStringId of the component whose triggerEvent will show the dynamic positioned menu.
mynullStringCorner of menu to align with trigger element.
atnullStringCorner of trigger to align with menu element.
overlayfalseBooleanDefines positioning, when enabled menu is displayed with absolute position relative to the trigger. Default is false, meaning static positioning.
triggerEventclickStringEvent name of trigger that will show the dynamic positioned menu.
名称 默认 类型 描述
ID 空值 串 组件的唯一标识符
呈现 真正 布尔型 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑 空值 目的 El表达式，它映射到支持Bean中的服务器端UIComponent实例
widgetVar 空值 串 客户端小部件的名称。
模型 空值 菜单型号 程序化菜单的MenuModel实例。
样式 空值 串 组件的内联样式。
styleClass 空值 串 组件的样式类。
自动显示 真正 布尔型 定义是否在鼠标悬停时显示第一级子菜单。 设置为false时，需要显示click事件。
触发 空值 串 其triggerEvent将显示动态定位菜单的组件的ID。
我的 空值 串 菜单的一角与触发元素对齐。
在 空值 串 触发器的角与菜单元素对齐。
覆盖 假 布尔型 当启用菜单显示相对于触发器的绝对位置时，定义定位。 默认值为false，表示静态定位。
triggerEvent 点击 串 触发器的事件名称，将显示动态定位菜单。

Primefaces TieredMenu –入门 (Primefaces TieredMenu – Getting Started)

TieredMenu consists of submenus and menuitems, submenus can be nested and each nested submenu will be displayed in an overlay. Those menuitems that get involved within p:tieredMenu component are targeted for Ajax, non-Ajax and navigation actions like all of these menuitems used previously. Following example shows you the most simplest applicable use for p:tieredMenu that is containing for a set of mixed actions.

TieredMenu由子菜单和菜单项组成，子菜单可以嵌套，每个嵌套的子菜单都将显示在覆盖图中。 那些包含在p：tieredMenu组件中的菜单项的目标是Ajax，非Ajax和导航操作，就像以前使用的所有这些菜单项一样。 以下示例显示了p：tieredMenu最简单的适用用法，该用法包含一组混合操作。

index11.xhtml

index11.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:tieredMenu>
		<p:submenu label="Ajax Menuitem">
			<p:menuitem value="Ajax Action" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="Non Ajax Menuitem">
			<p:menuitem value="Non Ajax Action" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="Navigations">
			<p:submenu label="Primefaces links">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime Blogs">
				<p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:tieredMenu>
</h:form>
</html>

TieredMenuManagedBean.java

TieredMenuManagedBean.java 

package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class TieredMenuManagedBean {
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

Primefaces TieredMenu –自动显示 (Primefaces TieredMenu – AutoDisplay)

By default, submenus are displayed when mouse is over root menuitems, set autoDisplay to false require a click on root menuitems to enable autoDisplay mode.

默认情况下，当鼠标位于根菜单项上时显示子菜单，将autoDisplay设置为false时需要单击根菜单项以启用自动显示模式。

The same example will be used to set autoDisplay to false against p:tieredMenu component.

对于p：tieredMenu组件，将使用相同的示例将autoDisplay设置为false。

Primefaces TieredMenu –叠加层 (Primefaces TieredMenu – Overlay)

Likewise Menu component, TieredMenu can also be overlaid using the same way that is used for overlaying the Menu component (See Menu Overlay).

同样，菜单组件TieredMenu也可以使用与覆盖菜单组件相同的方式进行覆盖（请参见菜单覆盖）。

index11.xhtml

index11.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:tieredMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top">
		<p:submenu label="Ajax Menuitem">
			<p:menuitem value="Ajax Action" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="Non Ajax Menuitem">
			<p:menuitem value="Non Ajax Action" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="Navigations">
			<p:submenu label="Primefaces links">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime Blogs">
				<p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:tieredMenu>
	<p:commandButton value="Show Menu" id="triggerBtn"></p:commandButton>
</h:form>
</html>

Primefaces TieredMenu –客户端API (Primefaces TieredMenu – Client Side API)

It’s also applicable for you to control TieredMenu component through using of Primefaces’ Client Side API.

您也可以使用Primefaces的客户端API控制TieredMenu组件。

MethodParamsReturn TypeDescription
show()–voidShows overlay menu.
hide()–voidHides overlay menu.
align()–voidAligns overlay menu with trigger.
方法 参数 返回类型 描述
表演（） – 虚空 显示覆盖菜单。
隐藏（） – 虚空 隐藏叠加菜单。
align（） – 虚空 使叠加菜单与触发器对齐。

index11.xhtml

index11.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function showMenu(){
			PF('tieredMenu').show();
		}
		function hideMenu(){
			PF('tieredMenu').hide();
		}
	</script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:tieredMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top" widgetVar="tieredMenu">
		<p:submenu label="Ajax Menuitem">
			<p:menuitem value="Ajax Action" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="Non Ajax Menuitem">
			<p:menuitem value="Non Ajax Action" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="Navigations">
			<p:submenu label="Primefaces links">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime Blogs">
				<p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:tieredMenu>
	<p:commandButton value="Show Menu - Normal Trigger" id="triggerBtn"></p:commandButton>
	<p:commandButton value="Show Menu - JavaScript function" onclick="showMenu()"></p:commandButton>
	<p:commandButton value="Hide Menu - JavaScript function" onclick="hideMenu()"></p:commandButton>
</h:form>
</html>

Primefaces SlideMenu –基本信息 (Primefaces SlideMenu – Basic Info)

SlideMenu is used to display nested submenus with sliding animation.

SlideMenu用于显示带有滑动动画的嵌套子菜单。

TagslideMenu
Component Classorg.primefaces.component.slidemenu.SlideMenu
Component Typeorg.primefaces.component.SlideMenu
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.SlideMenuRenderer
Renderer Classorg.primefaces.component.slidemenu.SlideMenuRenderer
标签 slideMenu
组件类别 org.primefaces.component.slidemenu.SlideMenu
组件类型 org.primefaces.component.SlideMenu
组件族 org.primefaces.component
渲染器类型 org.primefaces.component.SlideMenuRenderer
渲染器类 org.primefaces.component.slidemenu.SlideMenuRenderer

Primefaces幻灯片菜单–属性 (Primefaces Slide Menu – Attributes)

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
widgetVarnullStringName of the client side widget.
modelnullMenuModelMenuModel instance for programmatic menu.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the component.
backLabelBackStringText for back link.
triggernullStringId of the component whose triggerEvent will show the dynamic positioned menu.
mynullStringCorner of menu to align with trigger element.
atnullStringCorner of trigger to align with menu element.
overlayfalseBooleanDefines positioning, when enabled menu is displayed with absolute position relative to the trigger. Default is false, meaning static positioning.
triggerEventclickStringEvent name of trigger that will show the dynamic positioned menu.
名称 默认 类型 描述
ID 空值 串 组件的唯一标识符
呈现 真正 布尔型 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑 空值 目的 El表达式，它映射到支持Bean中的服务器端UIComponent实例
widgetVar 空值 串 客户端小部件的名称。
模型 空值 菜单型号 程序化菜单的MenuModel实例。
样式 空值 串 组件的内联样式。
styleClass 空值 串 组件的样式类。
后标签 背部 串 反向链接的文字。
触发 空值 串 其triggerEvent将显示动态定位菜单的组件的ID。
我的 空值 串 菜单的一角与触发元素对齐。
在 空值 串 触发器的角与菜单元素对齐。
覆盖 假 布尔型 当启用菜单显示相对于触发器的绝对位置时，定义定位。 默认值为false，表示静态定位。
triggerEvent 点击 串 触发器的事件名称，将显示动态定位菜单。

Primefaces幻灯片菜单–入门–叠加层和客户端API (Primefaces Slide Menu – Getting Started – Overlay & Client Side API)

SlideMenu consists of submenus and menuitems, submenus can be nested and each nested submenus will be displayed with a slide animation. SlideMenu functionlaities are similar to these defined in the TieredMenu that discussed in the previous section.

SlideMenu由子菜单和菜单项组成，子菜单可以嵌套，每个嵌套的子菜单都将以幻灯片动画显示。 SlideMenu功能与上一节中讨论的TieredMenu中定义的功能相似。

index12.xhtml

index12.xhtml 

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function showMenu(){
			PF('tieredMenu').show();
		}
		function hideMenu(){
			PF('tieredMenu').hide();
		}
	</script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:slideMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top" widgetVar="tieredMenu">
		<p:submenu label="Ajax Menuitem">
			<p:menuitem value="Ajax Action" action="#{slideMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="Non Ajax Menuitem">
			<p:menuitem value="Non Ajax Action" action="#{slideMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="Navigations">
			<p:submenu label="Primefaces links">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime Blogs">
				<p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:slideMenu>
	<p:commandButton value="Show Menu - Normal Trigger" id="triggerBtn"></p:commandButton>
	<p:commandButton value="Show Menu - JavaScript function" onclick="showMenu()"></p:commandButton>
	<p:commandButton value="Hide Menu - JavaScript function" onclick="hideMenu()"></p:commandButton>
</h:form>
</html>

SlideMenuManagedBean.java

SlideMenuManagedBean.java 

package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SlideMenuManagedBean {
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

摘要 (Summary)

Primefaces provides you a vast amount of Primefaces’ UI Menu components, that are set the developer in front of interesting collection that the user may select from. This tutorial intended to clarify part of these menu types. Contribute us by commenting below and find the source code for this tutorial.

Primefaces为您提供了大量的Primefaces的UI菜单组件，这些组件将开发人员设置在用户可以选择的有趣集合的前面。 本教程旨在阐明这些菜单类型的一部分。 通过在下面评论来贡献我们，并找到本教程的源代码。

翻译自: https://www.journaldev.com/3622/primefaces-menu-menubar-menubutton-tieredmenu-slidemenu-example

primefaces

cunchi4221
关注
primefaces教程_PrimeFaces教程
从零开始的教程世界
07-22 1932
primefaces教程Recently we have published a lot of Primefaces tutorial. PrimeFaces is one of the most popular reference implementation of Java ServerFaces specifications. 最近，我们发布了很多Primefaces教程。 PrimeFac...
primefaces教程_Primefaces，带有JPA的Spring 4（Hibernate 4 / EclipseLink）示例教程
从零开始的教程世界
07-19 353
primefaces教程Java Persistence API is a standard specification. It provides a persistence model that’s implemented by different implementer frameworks. Java Persistence API是一个标准规范。 它提供了由不同的实现者框架实现的持久性模型...
PrimeFaces教程(中文)
04-02
内容截取： 什么是PrimeFaces? PrimeFaces是一套开源的JSF组件套装，共有100多个支持AJAX的JSF组件。另外一个TouchFaces模块提供了用于移动web应用开发的UI工具。PrimeFaces的主要目标是为JSF创建终级组件集。 Prime技术 PrimeFaces由Prime技术维护，它是一个Turkish软件开发公司，专门从事敏捷咨询，企业Java和外包软件开发服务。项目由Çağatay Çivici领导，他是一个JSF专家组成员。
MenuBar 实例
ruilin521314
07-24 140
&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#FFFFFF" minWidth="955" minHeight=&qu
primefaces教程_Primefaces面板，PanelGrid和PanelMenu示例教程
从零开始的教程世界
07-09 832
primefaces教程Welcome to Primefaces Panel and PanelGrid example tutorial. We will also look into PanelMenu that provides a way of organizing submenus and menuitems in a hierarchical form mixed with acco...
PrimeFaces中文教程
11-30
【免费】JSF的变现层技术 PrimeFaces中文教程.很详细的例子
primefaces_users_guide_4_0_edtn2.pdf
09-08
PrimeFaces 4.0版本用户手册详细介绍了如何使用PrimeFaces提供的各种组件，包括下载、配置以及各个组件的使用方法和示例。 手册首先介绍了PrimeFaces是什么，即它是JSF的一个扩展，提供了一系列的组件，使得JSF应用...
primefaces_user_guide_6_0.zip_primefaces
09-24
《PrimeFaces用户指南6.0》是一份详细阐述PrimeFaces框架使用方法的文档，它针对的是Java EE开发者，特别是那些使用PrimeFaces库构建富互联网应用程序（Rich Internet Applications, RIA）的人群。PrimeFaces是一个...
primefaces_tutorial
07-05
这个"primefaces_tutorial"很可能是关于如何使用PrimeFaces进行开发的一系列教程或示例代码。在Java开发中，PrimeFaces因其易于使用、丰富的组件集和美观的界面设计而备受青睐。 首先，PrimeFaces 提供了大量的UI...
primefaces_user_guide_6_0.pdf
11-13
PrimeFaces用户指南是一个为开发者提供的文档，其中详细介绍了PrimeFaces的安装、配置以及使用方法，包括各种组件的使用示例和详细说明。文档涉及多个版本，但这里提到的是版本6.0的相关信息。 文档内容涉及组件...
PrimeFaces学习教程
03-02
PrimeFaces主要标签学习。 1 PrimeFaces综述 3 1.1 安装 3 1.2 配置，JSF2.0环境下用PrimeFace2.x 4 1.3 Hello World入门示例 4 1.4 UI组件： 4 2 UI组件 5 2.1 布局 5 2.1.1 Layout 页面布局 5 2.1.2 Panel用于包含其它组件，提供象windows窗口式的外观。 8 2.1.3 TabView 分页式面板组件 8 2.1.4 OutputPanel 仅用于显示元素 9 2.1.5 Fieldset 9 2.1.6 Dashboard 仪表盘 10 2.1.7 Themeswitcher 主题切换器，动态切换主题 11 2.1.8 Separator空白分隔区域 11 2.1.9 Spacer行内加空格 11 2.2 菜单 11 2.2.1 Menu 11 2.2.2 Menubar 12 2.2.3 MenuButton 13 2.2.4 Toolbar 13 2.2.5 Stack ：堆叠式菜单(竖向) 13 2.2.6 Dock ：动画鱼眼式菜单(横向) 14 2.3 按钮： 15 2.3.1 Button 15 2.3.2 CommandButton 15 2.3.3 CommandLink 17 2.3.4 ContextMenu 17 2.3.5 HotKey 17 2.4 输入组件 18 2.4.1 文本输入 18 2.4.1.1 Editor 18 2.4.1.2 Password 19 2.4.1.3 Password Strength 19 2.4.1.4 inputMask 输入掩码,实现格式化输入。 19 2.4.1.5 InputText 20 2.4.1.6 InputTextarea 20 2.4.1.7 Watermark :文本输入内容提示 20 2.4.1.8 Keyboard 显示一个虚拟键盘，用以支持输入字符。 21 2.4.1.9 Inplace 替换文本 22 2.4.2 选择式输入 22 2.4.2.1 AutoComplete ：自动补全 22 2.4.2.2 PickList 选择列表 25 2.4.2.3 Slider 滑动条 26 2.4.2.4 Spinner 27 2.4.3 其它格式数据的输入： 27 2.4.3.1 Spreadsheet电子表格 27 2.4.3.2 Calendar 各种格式的日期输入与显示 28 2.4.3.3 Schedule 日程计划输入组件 31 2.4.3.4 Captcha ：变形字符验证 31 2.4.3.5 Color Picker 32 2.5 集合(复杂格式)数据的输出与显示： 33 2.5.1 BreadCrumb ：层次化页面导航条 >…>….> 33 2.5.2 Accordion：一个容器组件，它用tab动态地显示折叠或展开过程。 34 2.5.3 Carousel：多用途,标签式、分布式显示 35 2.5.4 Galleria 图片陈列廊 36 2.5.5 LightBox :图片加亮显示 37 2.5.6 DataGrid 数据栅格 37 2.5.7 DataList 用列表的形式显示数据，每个栅格可显示多个数据项 39 2.5.8 DataTable数据表格 41 2.5.9 Tree 树形显示 46 2.5.10 TreeTable 树表 47 2.5.11 DragDrop 50 2.5.11.1 Draggable组件： 50 2.5.11.2 Droppable组件 51 2.5.12 Charts基于flash的图形生成与显示 52 2.6 数据导出： 54 2.6.1 Data Exporter 54 2.6.2 Printer 56 2.7 状态： 56 2.7.1 ProgressBar 56 2.7.2 NotificationBar 57 2.8 对话框： 58 2.8.1 ConfirmDialog 58 2.8.2 Dialog 58 2.9 图形图像多媒体： 59 2.9.1 ImageCompare ：提供丰富的接口比较两副图像 59 2.9.2 Graphic Text 文本图象化显示 60 2.9.3 ImageCropper 60 2.9.4 ImageSwitch 61 2.9.5 Google Maps 地图 61 2.9.6 Dyna Image 63 2.9.7 Media 65 2.9.8 Star Rating 65 2.9.9 Wizard: 66 2.10 消息： 66 2.10.1 Growl Mac风格的消息显示 66 2.10.2 Message/Messages 67 2.10.3 Tooltip 67 2.11 文件处理： 67 2.11.1 FileUpload 上传文件 67 2.11.2 FileDownload 下载文件 69 2.11.3 IdleMonitor 屏幕凝滞 70 2.11.4 Terminal 70 2.12 辅助功能(辅助其它JSF组件，给它们添加新的功能和行为)： 71 2.12.1 Ajax Engine 71 2.12.2 Ajax Poll轮询 72 2.12.3 Ajax远程调用p:remoteCommand 72 2.12.4 Ajax Status 显示ajax后台运行状态。 72 2.12.5 Focus 73 2.12.6 Effect: 73 2.12.7 Collector ： 74 2.12.8 Resizable 给任何JSF组件添加可调整大小的行为。 74 2.12.9 RequestContext : 75 3 TouchFaces 76 3.1.1 移动UI工具 76 3.1.2 Ajax Push/Comet 77 3.1.3 几分钟实现聊天应用： 78 4 附录 79 4.1 全部UI组件列表 84 4.2 PrimeFaces常用属性集 85
primefaces教程_Primefaces仪表板组件示例教程
从零开始的教程世界
07-11 942
primefaces教程We’ve mentioned earlier, Primefaces is one of leading libraries that provide you set of amazing UI control that makes you avoid the need of developing any components that you might need. 我...
primefaces教程_Primefaces树，TreeNode，TreeTable示例教程
从零开始的教程世界
07-09 1063
primefaces教程For displaying hierarchical data and create site navigation, Primefaces provides you Tree & TreeTable components. Leveraging these components aren’t so easy and it needs a lot of techn...
JSF PrimeFaces 项目教程
最新发布
gitblog_00849的博客
09-01 428
JSF PrimeFaces 项目教程 jsf-primefacesJSF Primefaces Tutorials项目地址:https://gitcode.com/gh_mirrors/js/jsf-primefaces 1. 项目的目录结构及介绍 jsf-primefaces/ ├── src/ │ ├── main/ │ │ ├── java/ │ │ │ └── ...
primefaces教程_Primefaces BlockUI组件示例教程
从零开始的教程世界
07-19 596
primefaces教程Primefaces BlockUI is used to block interactivityof JSFcomponents with optional ajax integration. Primefaces BlockUI用于通过可选的ajax集成来阻止JSF组件的交互。 Primefaces BlockUI (Primefaces BlockUI) Ta...
primefaces教程_Primefaces日历组件示例教程
从零开始的教程世界
07-09 1078
primefaces教程In our previous tutorials, we’ve covered several types of Primefaces components such as Primefaces Dashboard and Primefaces AccordionPanel. This tutorial intended for providing you a full ...
primefaces使用小技巧1
heuzxl的专栏
03-10 1273
最近使用JSF2.0+PrmeFaces3.4 Spring 做系统，但是用到树的操作的时候出现 很多问题，不过哥都一一解决了      一、View域。Sping中没有View域，可是老大又不让用ViewScope。他说会影响Spring，也就不使用了，不过确实需要怎么办呢，那就用Request代替吧，但是Request是不没有记忆 的，那上下文怎么连续的呢，这个，经过无数次的尝后，终于有点心
Primefaces框架开发杂谈！
Mr_Von的专栏
10-30 6074
使用Primefaces正式开发商用的项目算起来已经有1年半了，现在是时候该进行一下总结了，以便与国内正在使用或潜在使用Primefaces进行开发的各位进行更多的交流与分享。 首先介绍一下Primefaces是何物：Primefaces（以下简称：PF）是JSF众多框架之一，由一家土耳其公司研发与维护的，且现在使用其开发的项目越来越多 据官方介绍2012年已经超过icefaces和richfa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值