Question

我们最近开始在我们的应用程序中添加bootstrap，并且苦苦寻求一些我认为的基础知识。

所以，我们有一个传统扩展库＆＃34; dropDownButton＆＃34;在我们的页面上运行得非常好，但是，对于bootstrap，我们使用bootstrap网站上建议的普通html列表菜单，除了菜单是动态生成外，一切都很好用。请参阅以下代码：

<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 Menu
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
    <li class="dropdown-submenu"><a href="#">New</a>
         <ul class="dropdown-menu">
             <li class="dropdown-submenu"><a tabindex="-1" href="#">Document</a>
                 <ul class="dropdown-menu">
                 <xp:repeat id="repeat1" rows="30" var="documentName"
                    indexVar="documentIndex">
                    <xp:this.value>
                      <![CDATA[#{javascript: //some processing; return z;}]]>
                    </xp:this.value>
                    <xp:text tagName="li" escape="false" styleClass="red">
                       <xp:this.value><![CDATA[#{javascript:
                       return '<a>' + documentName + '</a>';}]]></xp:this.value>
                     </xp:text>
                  </xp:repeat>
            </ul>
       </li> 
     </ul>  
     </li>
</ul>
</div>

在上面的代码中，一切都很好，除了在重复控件中动态生成的东西。查看源代码一切都是完美生成的，因此，我们认为css不适用于动态生成的元素。现在通常不应该这样（通常应该使用css），但我不确定这里有什么问题。

真的很感激任何帮助。

注意：我们现在没有使用Bootstrap4Xpages（我们刚刚添加了bootstrap特定的库。

Answer 1

当您查看文档时，示例说：

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>

上面的代码既不会生成li元素的角色，也不会生成anchor元素的角色。 AFAIK您需要重新排序代码以包含这些属性。

Answer 2

我刚刚使用重复测试BS文档中的代码，它运行良好：

<div
                        class="dropdown">
                        <button
                            class="btn btn-sm btn-default dropdown-toggle"
                            type="button"
                            id="dropdownMenu1"
                            data-toggle="dropdown"
                            aria-expanded="true">
                            Dropdown
                            <span
                                class="caret"></span>
                        </button>
                        <ul
                            class="dropdown-menu"
                            role="menu"
                            aria-labelledby="dropdownMenu1">
                            <xp:repeat
                                var="documentName">
                                <xp:this.value><![CDATA[#{javascript:return ["Action 1", "Action 2", "Action 3"]}]]></xp:this.value>
                                <li
                                    role="presentation">
                                    <a
                                        role="menuitem"
                                        tabindex="-1"
                                        href="#">
                                        <xp:text
                                            value="#{documentName}"></xp:text>
                                    </a>
                                </li>
                            </xp:repeat>
                        </ul>
                    </div>

我发现你在下拉容器中使用了另一个UL - 这是不正确的，参考版本3.2 / 3.3的文档。在这里查看它的实时演示：http://www.notesx.net/bs3template.nsf/samples.xsp

Answer 3

所以，最后有两个问题：

带有重复控件的ID属性：以某种方式给予重复控制的任何id属性都会破坏css（可能是因为XPage中的动态id生成？）
Stwissel的回答：必须以某种方式添加boostrap的文档中提到的角色和其他属性（以及stwissel的回答）以获得正确的CSS。

只是为了显示更正的答案（仅重复循环）

<!-- I have just removed the id="repeat1" -->
<xp:repeat rows="30" var="documentName"
                    indexVar="documentIndex"> 
                    <xp:this.value>
                      <![CDATA[#{javascript: //some processing; return z;}]]>
                    </xp:this.value>
                    <xp:text tagName="li" escape="false" role="presentation">
                       <xp:this.value><![CDATA[#{javascript:
                       return '<a role="menuitem" tabindex="-1" href="#">' + documentName + '</a>';}]]></xp:this.value>
                     </xp:text>
</xp:repeat>

非常感谢所有的帮助，否则我们无法得到这个答案。

XPages bootstrap css未应用于动态生成的项目

3 个答案: