如何将 Xpages 导航栏 (Bootstrap) 基本叶节点设置为活动状态 [英] How to set Xpages Navigation Bar (Bootstrap) basic leaf nodes to active

问题描述

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

I am trying to use the Responsive Navigation Bar in the latest version of the Xpages Extension Library. It seems to work well but I cannot figure out how to set a link to active.

下面是我的代码的一部分.我应该怎么做才能使叶节点处于活动状态(即看起来被选中)?

Below is part of my code. What should I do to make a leaf node be active (i.e. look selected)?

<?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.它运行良好，除了我无法获得从优秀的待办事项应用程序中抓取的日志以正确对齐.

I have changed from using the Native Control to using pure Bootstrap. It works well, except I cannot get the log in that I grabbed from the excellent To Do application to align properly.

看起来像这样:

欢迎，空"看起来不像其他控件.我将把我的代码放在下面，也许你可以指出什么是错的.

The "Welcome, null" doesn't look like the other controls. I will put my code in below and maybe you can point out what is wrong.

我也想知道如何决定使用 Xpage 控件还是原生控件?我知道我在 Stack Overlow 中读到一些人说随着他们的应用程序的增长，他们遇到了 Xpages nabber 的一些限制.也许我应该重新使用它并按照您的建议解决突出显示问题?

I also am wondering how to make the decision to use Xpage controls or native? I know I read in Stack Overlow some people who said that as their application grew they ran into some limitations with the Xpages nabber. Maybe I should just go back to using it and fix the highlighting problem as you suggested?

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

The solution I eventually settled on was to put two Basic Leaf Nodes in and render one depending on whether it should be highlighted or not.

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

推荐答案

XPages Navbar 控件没有自动内置此功能.尽管可以通过扩展库的 Github 存储库上的问题"选项卡将其作为增强请求提出.

The XPages Navbar control doesn't have this capability automatically built into it. Though it could be something to raise as an enhancement request via the Issues tab on the Github repository of the Extension Library.

在 Bootstrap 中，这样做的方法是将active"类添加到处于活动/选定状态的 li 元素，如 http://getbootstrap.com/components/#navbar-default

In Bootstrap the way to do it is to add the "active" class to the li element that is active/selected, as in the first example from http://getbootstrap.com/components/#navbar-default

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

If you try to compute the styleClass of a basicLeafNode, it will apply the class to the anchor element, instead of the li element, and you don't get the active appearance.

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

So I think a custom implementation will be needed. In the Todo.nsf application that is inside the Extlib release zip, and also available as a boilerplate on Bluemix, there is such a custom implementation. On each XPage in the application, the root xp:view has a custom styleClass added, e.g. styleClass="homeStyle" or styleClass="todoStyle". Then in the CSS of the application it has this:

/* 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 放在一起，以适当地设置活动链接的样式.

This changes the style of the navbarAfterLinks so that one link looks selected/active at any one time depending on the XPage loaded. If you use that idea as a starting point, you could put together your own version with custom CSS to style the active link appropriately.

这篇关于如何将 Xpages 导航栏 (Bootstrap) 基本叶节点设置为活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！