如何将Xpages Navigation Bar (Bootstrap)基本叶节点设置为active

Question

我正在尝试使用最新版本的 Xpages 扩展库中的响应式导航栏。它似乎运行良好，但我不知道如何将 link 设置为活动状态。

下面是我的部分代码。我应该怎么做才能使叶节点处于活动状态（即看起来已选中）？

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xe:navbar
        id="custom-navbar1"
        fixed="unfixed-top"
        pageWidth="fluid"
        inverted="true"
        headingStyle="font-weight:bold;">

        <xe:this.navbarBeforeLinks>
            <xe:basicLeafNode label="Scoular">
                <xe:this.onClick><![CDATA[window.open("http://www.scoular.com","_blank")]]></xe:this.onClick>
            </xe:basicLeafNode>
            <xe:basicLeafNode label="PC Checklist">
                <xe:this.onClick><![CDATA[var url = "http://kc1/Bryan/PCCheckList2.nsf/xpHome.xsp"
window.location = url]]></xe:this.onClick>
            </xe:basicLeafNode>
            <xe:basicLeafNode label="Help Desk">
                <xe:this.onClick><![CDATA[var url = "http://kc1/Bryan/HelpDesk.nsf/xpHome.xsp";
window.location = url]]></xe:this.onClick>
            </xe:basicLeafNode>     
        </xe:this.navbarBeforeLinks>
    </xe:navbar>
</xp:view>

我已经从使用本机控件更改为使用纯 Bootstrap。它运行良好，除了我无法让我从出色的待办事项应用程序中获取的日志正确对齐。

看起来像这样：

"Welcome, null" 看起来不像其他控件。我将把我的代码放在下面，也许你可以指出哪里出了问题。

我也想知道如何决定使用Xpage控件还是原生？我知道我在 Stack Overlow 上读到一些人说，随着他们的应用程序的增长，他们运行受到 Xpages nabber 的一些限制。也许我应该回去使用它并按照您的建议解决突出显示问题？

我最终确定的解决方案是放入两个基本叶节点并根据是否应突出显示渲染一个。

> <xe:basicLeafNode
>               title="PC"
>               label="PC"
>               style="color:rgb(255,255,255)">
>               <xe:this.rendered><![CDATA[#{javascript:if (database.getFileName() == "PCCheckList2.nsf") {return true} else {return false}}]]></xe:this.rendered>
>               <xe:this.href><![CDATA[#{javascript:var url = "notes://KC1/Bryan/PCCheckList2.nsf/xpHome.xsp?OpenXpage"; var url2 =
> "http:apps.scoular.com/Bryan/PCCheckList2.nsf/xpHome.xsp?OpenXpage";
> url2}]]></xe:this.href>           </xe:basicLeafNode>             <xe:basicLeafNode
>               href="xpMain.xsp"
>               title="PC"
>               label="PC"
>               enabled="false">
>               <xe:this.rendered><![CDATA[#{javascript:if (database.getFileName() != "PCCheckList2.nsf") {return true} else {return
> false}}]]></xe:this.rendered>             </xe:basicLeafNode>

Answer 1

XPages Navbar 控件没有自动内置此功能。尽管可以通过扩展库 Github 存储库中的“问题”选项卡提出增强请求。

在 Bootstrap 中，方法是将 "active" class 添加到 li 元素，即 active/selected，如第一个来自 http://getbootstrap.com/components/#navbar-default

的示例

如果您尝试计算 basicLeafNode 的 styleClass，它会将 class 应用于锚元素，而不是 li 元素，并且您不会获得活动外观。

所以我认为需要自定义实现。在 Extlib 发行版 zip 中的 Todo.nsf 应用程序中，也可以作为 Bluemix 上的样板提供，有这样一个自定义实现。在应用程序中的每个 XPage 上，根 xp:view 添加了一个自定义 styleClass，例如styleClass="homeStyle" 或 styleClass="todoStyle"。然后在应用程序的 CSS 中有这个：

/* Styles for indicator colouring on navbar menu */
.homeStyle .glyphicon-home.utilIcon,
.todoStyle .glyphicon-th-list.utilIcon,
.completeStyle .glyphicon-ok.utilIcon,
.urgentStyle .glyphicon-exclamation-sign.utilIcon,
.overdueStyle .glyphicon-warning-sign.utilIcon {
    color: white;
}

这会更改 navbarAfterLinks 的样式，因此 link 根据加载的 XPage 在任何时候看起来 selected/active。如果您以该想法为起点，则可以将您自己的版本与自定义 CSS 放在一起，以适当地设置活动 link 的样式。

Answer 2

在您的 bootstrap-oneui-navbar-pagetreenode 中，只需将此脚本添加到您的 "Style" 属性作为 SSJS（钻石）：

if(context.getUrl().getSiteRelativeAddress(context) == "/Yourpage.xsp")
{
    return "background-color: #e7e7e7;";
}
else
{
    return "background-color: #f8f8f8;";
}

这会 "fake" 活动属性和 bootstrap 本身一样好吗？在我的页面看起来不错..

（感谢 Brad 写了这么多好的 xpages 东西： http://xcellerant.net/2014/09/05/getting-the-base-url-of-the-current-database-with-ssjs/)

/本

如何将Xpages Navigation Bar (Bootstrap)基本叶节点设置为active

How to set Xpages Navigation Bar (Bootstrap) basic leaf nodes to active

twitter-bootstrap-3

xpages

xpages-extlib