Question

我想在其中一个应用的Xpage中放置一个标签式界面。使用Bootstrap为Ui。

这很有效：

<xp:div styleClass="row">
            <xp:div styleClass="col-sm-12">
                <ul class="nav nav-tabs" id="myTab">
                    <li class="active">
                        <a data-target="#home" data-toggle="tab">Inventory</a>
                    </li>
                    <li>
                        <a data-target="#menu1" data-toggle="tab">Being Built</a>
                    </li>
                    <li>
                        <a data-target="#menu2" data-toggle="tab">Deployed</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="home">Inventory</div>
                    <div class="tab-pane fade" id="menu1">Being Built</div>
                    <div class="tab-pane fade" id="menu2">Deployed</div>
                </div>
            </xp:div>
        </xp:div>

        <xp:div styleClass="row">
            <xp:div styleClass="col-sm-12">

                <ul class="nav nav-tabs" id="ul1">
                    <li class="active">
                        <a data-target="#xhome" data-toggle="tab">Inventory</a>
                    </li>
                    <li>
                        <a data-target="#xmenu1" data-toggle="tab">Being Built</a>
                    </li>
                    <li>
                        <a data-target="#xmenu2" data-toggle="tab">Deployed</a>
                    </li>
            </ul>

但通常我会将任何直接的HTML转换为xp标记，以便我可以使用像disabled和其他Xpages控件和属性之类的东西。例如，根据文档的状态，我想隐藏和/或禁用某些选项卡。我发现使用Xpages更容易。

但是我尝试了各种控件，比如内联列表，选项卡式面板，这里的html代码没有任何效果。

是否有一些Xpage控件可以使用？

Answer 1

我不确定我是否完全跟随你。我想你想要这样的东西：

<ul class="nav navbar-nav">
    <li>
        <xp:link styleClass="navbar-brand" text="Home" value="/basic_Menu.xsp"
        id="link1" />
    </li> 
        <xp:panel tagName="li" rendered="#{controller.myObject.isValid}">
                <xp:link text="#{param.myUrlParam}" >
                    <xp:this.value><![CDATA[#{javascript:return "/myPage.xsp?jobId=" + param.get("myUrlParam")}]]></xp:this.value>
                                </xp:link>
                            </xp:panel>
                        </ul>

这是我在navBar中使用的Bootstrap代码的片段。没有<xp:li>标签吗？所以你必须直接使用<li>。但是如果您使用面板并将tagName更改为“li”，则实际上它变为“”，您可以使用面板的所有属性，如渲染。

因此请使用您发布的引导代码，然后在需要时添加此技术。还有一个<xp:span>可能也会有所帮助 - 尽管我使用面板来处理大部分内容。

Answer 2

大卫的做法很好。在我的一个应用程序中，我也使用Bootstrap选项卡并直接在li标签上隐藏

<li role="presentation"
                        style="display:#{javascript:(account.isNewNote())? 'none':'block;'}">
                        <a href="#banking" aria-controls="banking" role="tab"
                            data-toggle="tab">
                            <xp:text>
                                <xp:this.value><![CDATA[#{javascript:language.getLanguageString("page.account.tab.banking")}]]></xp:this.value>
                            </xp:text>
                        </a>
                    </li>

获取Bootstrap选项卡以在Xages中工作

2 个答案: