-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 タグの「:」が問題です。「slide-prev/next」は jQuery の特殊文字であるため、機能しません。

そこで、コロンをバックスラッシュでマスカレードする関数を作成しました。

今では正常に動作します

ありがとうアルミン

于 2012-10-12T14:58:29.097 に答える
0

あなたのコードをもっと見ることができたらいいのにと思います。ドキュメントのどこで次のことを定義していますか？

  1. jquery.js
  2. bootstrap.js
  3. bootstrap-carousel.js
  4. bootstrap.css

また、カルーセルは、すべてのresource / js / css定義とは別のカスタムコントロールにありますか？各コンポーネントの最後に静的定義としてjqueryとbootstrapjsを追加することになりました（xe：dynamicContentコントロールを備えたシングルページアプリで、jqueryがページの一部でのみ有効になるため、一部の機能が失われていました） 。

于 2012-10-11T13:09:55.817 に答える