TieredMenu
TieredMenu displays submenus in nested overlays.
Source
<h:form>
<p:growl id="messages"/>
<h3>Default TieredMenu</h3>
<p:tieredMenu style="width:180px">
<p:submenu label="Ajax Menuitems" icon="ui-icon-refresh">
<p:menuitem value="Save" actionListener="#{menuBean.save}" update="messages" icon="ui-icon-disk" />
<p:menuitem value="Update" actionListener="#{menuBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w" />
</p:submenu>
<p:submenu label="Non-Ajax Menuitem" icon="ui-icon-newwin">
<p:menuitem value="Delete" actionListener="#{menuBean.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
</p:submenu>
<p:separator />
<p:submenu label="Navigations" icon="ui-icon-extlink">
<p:submenu label="Prime Links">
<p:menuitem value="Prime" url="http://www.prime.com.tr" />
<p:menuitem value="PrimeFaces" url="http://www.primefaces.org" />
</p:submenu>
<p:menuitem value="Mobile" outcome="/mobile/index" />
</p:submenu>
</p:tieredMenu>
<h3>Click Trigger</h3>
<p:tieredMenu style="width:180px" autoDisplay="false">
<p:submenu label="Ajax Menuitems" icon="ui-icon-refresh">
<p:menuitem value="Save" actionListener="#{menuBean.save}" update="messages" icon="ui-icon-disk" />
<p:menuitem value="Update" actionListener="#{menuBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w" />
</p:submenu>
<p:submenu label="Non-Ajax Menuitem" icon="ui-icon-newwin">
<p:menuitem value="Delete" actionListener="#{menuBean.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
</p:submenu>
<p:separator />
<p:submenu label="Navigations" icon="ui-icon-extlink">
<p:submenu label="Prime Links">
<p:menuitem value="Prime" url="http://www.prime.com.tr" />
<p:menuitem value="PrimeFaces" url="http://www.primefaces.org" />
</p:submenu>
<p:menuitem value="Mobile" outcome="/mobile/index" />
</p:submenu>
</p:tieredMenu>
<h3>Overlay</h3>
<p:commandButton id="dynaButton" value="Show" type="button"/>
<p:tieredMenu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
<p:submenu label="Ajax Menuitems">
<p:menuitem value="Save" actionListener="#{menuBean.save}" update="messages" icon="ui-icon-disk"/>
<p:menuitem value="Update" actionListener="#{menuBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w"/>
</p:submenu>
<p:submenu label="Non-Ajax Menuitem">
<p:menuitem value="Delete" actionListener="#{buttonBean.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
</p:submenu>
<p:submenu label="Navigations" icon="ui-icon-extlink">
<p:submenu label="Prime Links">
<p:menuitem value="Prime" url="http://www.prime.com.tr" />
<p:menuitem value="PrimeFaces" url="http://www.primefaces.org" />
</p:submenu>
<p:menuitem value="Mobile" outcome="/mobile/index" />
</p:submenu>
</p:tieredMenu>
</h:form>
package org.primefaces.examples.view;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
public class MenuBean {
public void save() {
addMessage("Data saved");
}
public void update() {
addMessage("Data updated");
}
public void delete() {
addMessage("Data deleted");
}
public void addMessage(String summary) {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, null);
FacesContext.getCurrentInstance().addMessage(null, message);
}
}
