我已经实现了一个单页设计的Web应用程序。基本上只加载一个页面,然后使用AJAX更新中心内容。代码如下:
<h:body> <pe:layout id="page" fullPage="true"> <!-- West --> <pe:layoutPane id="west" position="west" > <f:facet name="header">Main Menu</f:facet> <h:form id="form1"> <p:panelMenu id="panelMenu"> <p:submenu label="Persons"> <p:menuitem value="Person List" update=":centerpanel" actionListener="#{layout.setAll('formPersonList.xhtml', 'Person List')}"> </p:menuitem> </p:submenu> </p:panelMenu> </h:form> </pe:layoutPane> <!-- Center --> <pe:layoutPane id="content" position="center"> <h:panelGroup id="centerpanel" layout="block"> <ui:include id="include" src="#{layout.navigation}" /> </h:panelGroup> </pe:layoutPane> </pe:layout> </h:body>
这基本上是可行的,但我也想启用浏览器导航。例如:http://ticketmonster- jdf.rhcloud.com/,网址上带有#标签。因此,使用后退/前进按钮,我可以转到等效选项。任何想法如何做到这一点?
我创建了一个博客文章,根据您的问题解释如何使用jQuery BBQ使其工作。
使用jQuery BBQ,您可以跟踪状态,历史记录并允许添加书签,同时通过AJAX和/或DHTML动态修改页面。
首先,我们应该包括jQuery BBQ。
<h:outputScript library="js" name="jquery.ba-bbq.min.js" />
现在考虑我们有菜单(包含所有导航规则)
<p:submenu label="Meat"> <p:menuitem outcome="/meat/steak.xhtml" value="Steak" /> <p:menuitem outcome="/meat/burger.xhtml" value="Burger" /> <p:menuitem outcome="/meat/chicken.xhtml" value="Chicken" /> <p:menuitem outcome="/meat/kebab.xhtml" value="Kebab" /> </p:submenu>
然后居中的内容
<pe:layoutPane id="content" position="center"> <h:panelGroup id="centerpanel" layout="block"> <ui:include id="include" src="#{mainBean.currentNav}" /> </h:panelGroup> </pe:layoutPane>
在 包括 反映点击currentNav。
现在在表单中定义一个 remoteCommand
<p:remoteCommand name="updateNav" actionListener="#{mainBean.updateNav()}" update=":centerpanel"/>
这个remoteCommand将基于主题标签更新我们的currentNav。
创建您的JS文件或将以下代码包含到文档中
$(document).ready(function() { $('.ui-menuitem-link').click(function(event) { event.preventDefault(); var currentNav = $(this).attr('href'). substr($(this).attr('href').indexOf("/faces") + 6) window.location.hash = '#' + currentNav; }) $(window).bind('hashchange', function(e) { var url = $.param.fragment(); updateNav([{name: 'currentNav', value: url}]); //remoteCommand Call }) $(window).trigger('hashchange'); });
基本上,首先,我们处理对菜单项的单击,设置窗口的哈希值。
然后使用jQuery BBQ定义窗口的hashchange事件。
ManagedBean
public void updateNav() { FacesContext context = FacesContext.getCurrentInstance(); Map map = context.getExternalContext().getRequestParameterMap(); currentNav = (String) map.get("currentNav"); }
有关完整的代码,请参阅我为该问题创建的新帖子。
使用jQuery BBQ的Primefaces哈希导航
这个例子也可以在github上找到。
希望能帮助到你。