为选定的树节点设置 styleClass

Question

有时我会遇到以下问题，这可能很容易解决。但也许我就是不明白。

在 XPage treeNode 中，例如在 xe:applicationLayout 的 xe:navigator 中使用（pageTreeNode、placeBarActions 等）我想知道如何影响 styleClass 属性以便我可以影响 "selected color".

<xe:this.titleBarTabs>
    <xe:pageTreeNode label="Label Acc1"
        selection="/Admin/Acc1/.*" page="/xpAdminAcc1.xsp"
        styleClass="bg-info">
    </xe:pageTreeNode>
    <!--- ... -->
</xe:this.titleBarTabs>

在此示例中，styleClass 'bg-info' 将始终分配给 titleBarTab。这是选项卡的背景。对于选定的选项卡，class "active" 会自动分配：class"bg-info active".

有没有办法定义，例如class bg-primary 用于 active?

我正在使用 bootstrap3 主题。这是 HTML 生成的代码。如您所见，唯一的区别是激活菜单项的 class 包含 class "active":

<div class="col-sm-12 col-md-12 applayout-titlebar-tabsarea" role="navigation">
<ul id="view:_id1:_id2:appLayout_tb" class="nav nav-tabs applayout-titlebar-tabs" role="tablist">
    <li class="menu-item active">
        <a role="tab" href="/LAP/MYDB.nsf/xpAdminAcc1.xsp" class="bg-info active">Label Acc1</a>
    </li>
    <li class="menu-item">
        <a role="tab">Label Acc2</a>
    </li>
    <li class="menu-item">
        <a role="tab" href="/LAP/MYDB.nsf/xpAdminAcc2.xsp" class="bg-info">Label Acc2</a>
    </li>
<!-- -->

Answer 1

如果您将样式表添加到您的应用程序并指定要为其应用的样式 class，那么由于这是在应用程序级别而不是服务器级别，因此 CSS 的标准规则（级联样式表，因此样式向下级联并得到扩展/覆盖）将应用并且应用程序级别将优先。请记住将应用程序样式表添加为主题资源/布局自定义控件/XPage 上的资源。 XPage 是最不推荐的，因为它需要在多个地方添加。

最简单的方法是使用 Firebug 或其他检查工具，select 元素，找到设置当前主题的 CSS，将其复制并粘贴到应用程序的样式表中并相应地覆盖设置。

这是一个元素略有不同的示例：

我的CSS是：

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
background-color:red;

}

为选定的树节点设置 styleClass

Set styleClass for Selected treeNodes

xpages

xpages-extlib