-2

我在我的 xpages 中实现了引导轮播，它在自动模式下运行良好。但我无法手动切换图片（悬停停止也很好用）。

下面是从我的 xpage 创建的代码。好的，id 标签看起来有点奇怪。href的计算...

<div id="view:_id1:_id215:carousel" class="carousel slide">
<div id="view:_id1:_id215:carousel_inner" class="carousel-inner">
<div id="view:_id1:_id215:carousel_inner:0:Image" class="item active">
<img id="view:_id1:_id215:carousel_inner:0:image1" src="....jpg" alt="" class="viewphoto"></div>
<div id="view:_id1:_id215:carousel_inner:1:Image" class="item">
<img id="view:_id1:_id215:carousel_inner:1:image1" src="....jpg" alt="" class="viewphoto"></div>
<div id="view:_id1:_id215:carousel_inner:2:Image" class="item">
<img id="view:_id1:_id215:carousel_inner:2:image1" src="....jpg" alt="" class="viewphoto"></div>
</div>
<a id="view:_id1:_id215:cLeft" href="#view:_id1:_id215:carousel" class="carousel-control left" data-slide="prev">&lt;</a>
<a id="view:_id1:_id215:cRight" href="#view:_id1:_id215:carousel" class="carousel-control right" data-slide="next">&gt;</a>
</div>
</div>

这就是 xpage 代码的外观（作为附加信息）

    <xp:panel id="carousel" styleClass="carousel slide">
        <xp:repeat id="carousel_inner" rows="30" value="#{view1}"
            var="cImages" styleClass="carousel-inner">

            <xp:panel id="Image">

                <xp:this.styleClass><![CDATA[#{javascript:if (sessionScope.carCount == 1){
                sessionScope.carCount = 2;
                        return "item active";
                    } else {
                        return "item"
                }}]]></xp:this.styleClass>

                <xp:image id="image1" styleClass="viewphoto">
                    <xp:this.url><![CDATA[#{javascript:getCImageHTML(cImages.getDocument(), "fnImage", "Image")}]]></xp:this.url>
                </xp:image>

                <xp:panel styleClass="carousel-caption" id="caption">
                    <h4>Thumbnaillabel header</h4>
                    <xp:label value="Aloha some description" id="label1"></xp:label>
                </xp:panel>
            </xp:panel>
        </xp:repeat>

        <xp:link escape="true" id="cLeft" styleClass="carousel-control left"
            value="##{id:carousel}">
            <xp:this.text><![CDATA[<]]></xp:this.text>
            <xp:this.attrs>
                <xp:attr name="data-slide" value="prev"></xp:attr>
            </xp:this.attrs>
        </xp:link>

        <xp:link escape="true" id="cRight" styleClass="carousel-control right"
            value="##{id:carousel}">
            <xp:this.text><![CDATA[>]]></xp:this.text>
            <xp:this.attrs>
                <xp:attr name="data-slide" value="next"></xp:attr>
            </xp:this.attrs>
        </xp:link>
    </xp:panel>

所以也许有人有一个想法。或者，由于计算出的 id 标签，这可能是不可能的。

4

2 回答 2

1

好的，我弄清楚了问题所在。ID-Tag 中的 ':' 是问题所在。'slide-prev/next' 不能使用它，因为它是 jQuery 中的一个特殊字符。

所以我创建了一个用反斜杠伪装冒号的函数。

现在它工作正常

谢谢阿明

于 2012-10-12T14:58:29.097 回答
0

希望我能看到更多你的代码。您在文档的哪个位置定义了以下内容？

  1. jQuery.js
  2. 引导程序.js
  3. 引导轮播.js
  4. 引导程序.css

此外，您的轮播是否位于与所有资源/js/css 定义分开的自定义控件中？我最终在每个组件的末尾添加了我的 jquery 和 bootstrap js 作为静态定义（否则我失去了一些功能，jquery 只在我的页面的一部分上生效，在一个带有 xe:dynamicContent 控件的单页应用程序中） .

于 2012-10-11T13:09:55.817 回答