让Bootstrap选项卡在Xages中工作

Question

我想在我的一个应用程序的Xpage中放置选项卡式界面。为Ui使用Bootstrap。

这个伟大的工程：

<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的标签，所以我可以用的东西像残疾人和其他的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> 

这是从导航栏中使用的Bootstrap代码片段。没有<xp:li>标记正确吗？所以你必须直接使用<li>。但是，如果您使用面板并将tagName更改为“li”，那么实际上它会变成“”，您可以使用面板的所有属性（如渲染）。

因此，使用引导程序代码像你张贴，然后在需要的地方添加这种技术。还有一个<xp:span>这也可能是有益的 - 虽然我使用大部分这些东西的面板。

Answer 2

大卫的方法是一个很好的方法。 在我的应用程序之一，我也用引导标签和李标签直接

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