Question

我一直在努力了解如何在PrimeFaces手机下使用NavBar并尝试在这里找到答案，在Primefaces论坛上并使用谷歌但尚未找到任何有用的东西。

对于展示，我找到了这个部分：

<pm:view id="navbar">
  <pm:header title="NavBar">
    <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
      <pm:navBar>
        <p:button value="Home" icon="home" href="#main?reverse=true" styleClass="ui-btn-active"/>
        <p:button value="Info" icon="info" href="#main?reverse=true" />
        <p:button value="Search" icon="search" href="#main?reverse=true" />
      </pm:navBar>
    </pm:header>

我真的不同意在NavBar的“外部”视图，因为无论我在我的应用程序中使用什么“标签”，我都希望NavBar是相同的。我理解这个错误还是这个应该是这样的？如果这是我接受的方式，但我面临的下一个问题是它使用幻灯片动画。根据我的理解，我对动画的唯一选择是将其设置为反转，但我想在这种情况下将其完全关闭。

我误解了整件事吗？是否有人使用他们想要分享的NavBar有一些例子，非常感谢。

// Andreas

Answer 1

我目前正在使用PF mobile，据我了解，您可以按照手册here（第9页）中的说明每h：view插入多个“标签”。

Ergo：ONE h：查看很多下午：查看，下午：页面（标签）。

如果您希望在每个标签/页面上显示相同的NavBar，则必须在pm:view pm:page之外的pm:header中添加{... 1}} {{1} - 标签（用于将其显示为顶部的固定导航栏）。它将显示在每个页面的顶部。

否则将其放在pm:page - 标签内，以在每个标签/页面上显示唯一的导航栏。

幻灯片动画仅影响您创建的页面而不影响NavBar。这些动画仅在您实现多个页面时显示。

希望这有帮助，玩得开心！

更新

我找不到我的代码片段而我无法重新编码。所以我很快就建立了一个解决方案，希望它能帮到你。我在<ui:composition> - 包含全局导航栏的文件夹中创建了一个META-INF页面。

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile">

<head>
<title>navBar Template</title>
</head>

<body>
    <ui:composition>
        <pm:navBar>
            <p:button value="Home" icon="home" href="#main?reverse=true" styleClass="ui-btn-active" />
            <p:button value="Info" icon="info" href="#main?reverse=true" />
            <p:button value="Search" icon="search" href="#main?reverse=true" />
        </pm:navBar>
    </ui:composition>
</body>
</html>

之后，我通过引用<pm:view> - 标记在每个<ui:iclude>中包含了我的模板：

    <pm:page title="NavBar">
        <pm:view>
            <pm:header title="Welcome" fixed="true" >
                <ui:include src="/META-INF/template/navbar.xhtml" />
            </pm:header>
            <pm:content>
                ...
            </pm:content>
        </pm:view>

        <pm:view id="viewB">
            <pm:header title="B" >
                <ui:include src="/META-INF/template/navbar.xhtml" />
            </pm:header>
            <pm:content>
                B View
            </pm:content>
        </pm:view>
    </pm:page>

我还在，但我希望这对你现在有所帮助。一旦我找到一些时间，我就会有更深入的了解。

干杯！

如何使用NavBar for PrimeFaces mobile

1 个答案:

更新