Question

我正在尝试在最新版本的Xpages扩展库中使用响应式导航栏。它似乎运作良好，但我无法弄清楚如何设置活动的链接。

以下是我的代码的一部分。如何使叶子节点处于活动状态（即看起来被选中）？

<?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>

我已经从使用Native Control更改为使用纯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

XPage Navbar控件没有自动内置的功能。虽然可以通过扩展库的Github存储库上的“问题”选项卡将其作为增强请求引发。

在Bootstrap中，执行此操作的方法是将“active”类添加到活动/选中的li元素，如http://getbootstrap.com/components/#navbar-default中的第一个示例

如果您尝试计算basicLeafNode的styleClass，它会将该类应用于锚元素，而不是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的样式，以便根据加载的XPage，一个链接在任何时候都处于选中/活动状态。如果您使用该想法作为起点，您可以将自己的版本与自定义CSS放在一起，以适当地设置活动链接的样式。

Answer 2

在你的bootstrap-oneui-navbar-pagetreenode中，只需将此脚本添加到你的＆＃34; Style＆＃34;属于SSJS（钻石）：

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

这将＆＃34;假＆＃34;活动属性和bootstrap本身一样好？在我的页面看起来很不错..

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

/奔

如何将Xpages Navigation Bar（Bootstrap）基本叶节点设置为活动状态

2 个答案: