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