Xpages：Bootstrap 手风琴控件无法正常工作

Question

尝试构建具有 bootstrap 主题的可重用菜单自定义控件。我想要一个手风琴布局，看起来像这样：

在真正的手风琴中，当用户选择与先前选择的标题不同的标题时 "rolls up"。我的没有卷起来。我想这不是一个大问题，但我担心如果这不起作用，那么其他方法也不起作用。

我想知道在这种情况下使用 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>

Answer 1

您发布的代码有 2 个问题。

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

因为它是一个 XP 标签，id accordion 被转换成一个由前缀组成的程序化 id...例如view:0:whatever:accordion。这会破坏您的选项卡并且不允许它们 link 到面板组。将其更改为 <div class="panel-group" id="accordion">

第二个是用于生成制表符的重复控件。默认情况下，重复控件会创建自己的 div。这是在手风琴 HTML 中创建外星人 HTML 标签。重复控件有一个属性，称为 disableOutputTag。将其设置为 true，它将删除外星人 HTML.

Xpages：Bootstrap 手风琴控件无法正常工作

Xpages: Bootstrap accordion controls not working correctly

custom-controls

xpages

twitter-bootstrap-3