Xpages：Bootstrap手風琴控件無法正常工作

嘗試使用引導主題構建可重複使用的菜單自定義控件。當用戶選擇一個不同的標題，則先前選擇的標題「捲起」Xpages：Bootstrap手風琴控件無法正常工作

在真正的手風琴：我想手風琴佈局，看起來像這樣。我的礦井沒有捲起來。我想這不是一個大問題，但擔心如果這不起作用，那麼別的東西也無法工作。

我想知道在這種情況下使用Xpages中的dojo手風琴會更好嗎？

自定義控制代碼（ccMenuFinal）

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" 
xmlns:xe="http://www.ibm.com/xsp/coreex"> 

<style> 
    .list-group{margin-bottom:0} 
</style>  

    <xp:div styleClass="panel-group" id="accordion"> 

    <xp:repeat id="repeat1" var="entry" indexVar="index" 
     value="#{javascript:compositeData.mnuHeading}"> 

      <xp:div styleClass="panel panel-default"> 
       <xp:div styleClass="panel-heading"> 
        <h4 class="panel-title"> 
         <a data-toggle="collapse" 
          data-parent="#accordion" 
          href="#{javascript:'#' + entry.MenuHeadingName}"> 
          <xp:text escape="true" id="computedField1" 
           value="#{javascript:entry.MenuHeadingName}" /> 
         </a> 
        </h4> 
       </xp:div> 


       <div id="#{javascript:entry.MenuHeadingName}" 
        class="panel-collapse collapse"> 

        <ul class="list-group"> 
         <xp:repeat id="repeat2" var="entry2" 
          indexVar="index2" value="#{javascript:entry.mnuTitle}"> 
         <xp:link id="lnk" 
           value="#{javascript://entry2.mnuTrg}"> 
           <xp:this.styleClass><![CDATA[#{javascript:if (entry2.mnuTrg == context.getUrl().getSiteRelativeAddress(context)) 
{"list-group-item active"} 
else 
{"list-group-item"}}]]></xp:this.styleClass> 
           <xp:image id="image3" 
            style="padding-right:10.0px" 
            url="#{javascript:entry2.mnuTtlIcn}"> 
           </xp:image> 
           <xp:this.text><![CDATA[#{javascript:entry2.mnuNme}]]></xp:this.text> 
          </xp:link> 
         </xp:repeat> 
        </ul> 

       </div> 
      </xp:div> 

    </xp:repeat> 

    </xp:div> 

</xp:view>

XPAGE代碼：

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" 
xmlns:xc="http://www.ibm.com/xsp/custom"> 
<div class="container"> 
<xc:ccMenuFinal> 
     <xc:this.mnuHeading> 
      <xc:mnuHeading MenuHeadingName="PCs"> 
       <xc:this.mnuTitle> 
        <xc:mnuTitle mnuTrg="/xpView01.xsp" 
         mnuNme="Inventory" 
         mnuTtlIcn="/inventory16X16blue.png" 
         mnuTtlIcnAct="/inventory16X16.png"> 
        </xc:mnuTitle> 
        <xc:mnuTitle mnuNme="Being Built" 
         mnuTrg="/xpView02.xsp" 
         mnuTtlIcn="/build16X16blue.png" 
         mnuTtlIcnAct="/build16X16.png"> 
        </xc:mnuTitle> 
       </xc:this.mnuTitle> 
      </xc:mnuHeading> 
      <xc:mnuHeading MenuHeadingName="Tasks"> 
       <xc:this.mnuTitle> 
        <xc:mnuTitle mnuNme="Build Tasks" 
         mnuTrg="/xpViewTasksBuild.xsp"> 
        </xc:mnuTitle> 
       </xc:this.mnuTitle> 
      </xc:mnuHeading> 
     </xc:this.mnuHeading> 
    </xc:ccMenuFinal> 
</div> 
</xp:view>

來源

2016-05-30 Bryan Schmiedeler

可能是這可以幫助你，http://bootsnipp.com/snippets/featured/accordion-menu –

弗蘭克。謝謝。這就是我從我的代碼基礎。我的目標是製作一個像手風琴菜單這樣的引導程序，它將數據從編程中分離出來，這樣我就可以使用菜單的某些數據結構的數據對菜單進行自定義控制。我可以通過一個菜單來處理這個問題，並且沒有手風琴，但是無法使它與這兩件事合作。 –

有2個問題與你發佈的代碼。

第一個是你的<xp:div styleClass="panel-group" id="accordion">

因爲它是一個XP標籤，標識手風琴被轉換成一個綱領性的ID，它由前綴... e.g。 view:0:whatever:accordion。這是打破你的標籤，並不允許他們鏈接到面板組。將其更改爲<div class="panel-group" id="accordion">

第二個是用於生成選項卡的重複控制。作爲默認設置，重複控制會創建自己的div。這是在手風琴HTML中創建外部HTML標籤。有一個名爲disableOutputTag的重複控制屬性。將其設置爲true，它將刪除外來HTML。

來源

2016-05-31 14:49:37

Xpages：Bootstrap手風琴控件無法正常工作

回答

相關問題