Question

我正在尝试构建一个具有可折叠引导面板的重复。即使生成的html看起来很好，扩展或折叠的链接也没有任何作用。这一切都适用于普通的HTML，但似乎在锚链接中的ID有问题？有什么想法吗？

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

<xp:repeat
    id="accordion"
    rows="30"
    styleClass="panel-group"
    style="width:700px"
    indexVar="ind"
    var="col">
    <xp:this.value><![CDATA[#{javascript:return ["test 1", "test 2", "test 3"];}]]></xp:this.value>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <xp:panel tagName="a">
                    <xp:this.attrs>
                        <xp:attr
                            name="data-toggle"
                            value="collapse">
                        </xp:attr>
                        <xp:attr name="href">
                            <xp:this.value><![CDATA[#{javascript:return "#" + getClientId("collapsePanel");}]]></xp:this.value>
                        </xp:attr>
                    </xp:this.attrs>
                    <xp:label id="label1">
                        <xp:this.value><![CDATA[#{javascript:return col + "panel";}]]></xp:this.value>
                    </xp:label>
                </xp:panel>
            </h4>
        </div>
        <xp:panel id="collapsePanel" styleClass="panel-collapse collapse in">

                <div class="panel-body">
                    <xp:text
                        escape="true"
                        id="computedField1"
                        value="#{javascript:return col;}">
                    </xp:text>
                </div>
                <div class="panel-footer">Panel Footer</div>
        </xp:panel>
    </div>
</xp:repeat>
</xp:view>

Answer 1

这是技巧，而不是使用面板和getClientId，我使用div并使用索引var计算id。谢谢Paul Withers！

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

<xp:repeat
    id="accordion"
    rows="30"
    styleClass="panel-group"
    style="width:700px"
    indexVar="ind"
    var="col">
    <xp:this.value><![CDATA[#{javascript:return ["test 1", "test 2", "test 3"];}]]></xp:this.value>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <xp:panel tagName="a">
                    <xp:this.attrs>
                        <xp:attr
                            name="data-toggle"
                            value="collapse">
                        </xp:attr>
                        <xp:attr name="href">
                            <xp:this.value><![CDATA[#{javascript:return "#" + "test" + ind;}]]></xp:this.value>
                        </xp:attr>
                    </xp:this.attrs>
                    <xp:label id="label1">
                        <xp:this.value><![CDATA[#{javascript:return col + "panel";}]]></xp:this.value>
                    </xp:label>
                </xp:panel>
            </h4>
        </div>
        <div id="test#{ind}" class="panel-collapse collapse">

                <div class="panel-body">
                    <xp:text
                        escape="true"
                        id="computedField1"
                        value="#{javascript:return col;}">
                    </xp:text>
                </div>
                <div class="panel-footer">Panel Footer</div>
        </div>
    </div>
</xp:repeat>
</xp:view>

Answer 2

您是否需要使用xpages面板？您是否可以尝试远离xpages面板并使用引导面板？这就是我一直在使用的。

使用以下collapse.css

创建一个新样式表

.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}

这是代码

<div class="panel panel-default" id="panel2">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseTwo"
                    href="#collapseTwo" class="collapsed">
                    label
                </a>
            </h4>

        </div>
        <div id="collapseTwo" class="panel-collapse collapse in">
            <div class="panel-body">
</div>
        </div>
    </div>

如何在XPages中使用重复构建可折叠引导面板

2 个答案: