javascript - 是否可以更改 ExtLib 中应用程序布局控件中设置的预定义 Bootstrap 类

Question

我在 extlib 中将响应式 Bootstrap 主题与应用程序布局控件一起使用，但实际上找不到任何关于是否可以更改 Bootstrap 预定义类的文档。

在下面的示例中，有一个带有标签的标题栏，使用了预定义的 Bootstrap 类“nav nav-tabs”
就我而言，我不想要“nav-tabs”类，而是想要“nav-pills”类，但我找不到使用源代码编辑器更改它的方法，我知道我可以使用客户端脚本更改类，但我我希望有一个服务器端的方法来控制它。

<xe:this.configuration>
        <xe:bootstrapResponsiveConfiguration legal="Copyright " placeBar="true" banner="true" fixedNavbar="fixed-bottom" footer="true" invertedNavbar="true" placeBarName="#{javascript:compositeData.Title}" rightColumnLabel="RightColumnLabel" titleBar="true" defaultNavigationPath="/tab1/link1" productLogo="/logo.gif" pageWidth="full">
            <xe:this.titleBarTabs>
                    <xe:pageTreeNode label="page1" page="/page1.xsp"></xe:pageTreeNode>
                    <xe:pageTreeNode label="page2" page="/page2.xsp"></xe:pageTreeNode>
                    <xe:pageTreeNode label="page3" page="/page3.xsp"></xe:pageTreeNode>
            </xe:this.titleBarTabs>
        </xe:bootstrapResponsiveConfiguration>
</xe:this.configuration>

我尝试添加这样的类，但它对 html 没有任何作用

<xe:this.titleBarTabs styleClass="nav nav-pills">  

Answer 1

那个特定的 bootstrap CSS 类在 com.ibm.xsp.theme.bootstrap 插件的 TitleBarTabsRenderer 中设置。查看源码here . ResponsiveAppLayoutRenderer 使用该渲染器来渲染选项卡。

按照当前的设置，做你想做的最好的办法是像你说的那样使用 CSJS，或者扩展和覆盖 TitleBarTabsRenderer 和 ResponsiveAppLayoutRenderer 类.这不是最简单的方法，所以也许这可以变成一个 SPR/增强请求，并查看 future 的 extlib 版本。