具有浏览器历史记录/标签的PrimeFaces Ajax导航

一尘不染

具有浏览器历史记录/标签的PrimeFaces Ajax导航

ajax

我已经实现了一个单页设计的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/，网址上带有＃标签。因此，使用后退/前进按钮，我可以转到等效选项。任何想法如何做到这一点？

阅读 247

2020-07-26

共1个答案

一尘不染

我创建了一个博客文章，根据您的问题解释如何使用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上找到。

希望能帮助到你。

2020-07-26