0

現在、jQuery Mobile で構築されたページに iDangerous Swiper を追加しようとしていますが、swiper を表示するには、ページをリロードする必要があります。人々がこれらの問題を抱えているいくつかの例を見てきましたが、彼らの解決策は以下の問題に対して機能しません.

pageshow、pageinit、pagebeforeshow、mobileinit など、さまざまなことを試しました。また、trigger("create")、trigger("refresh") を実行し、jQuery Mobile js の前または後にスクリプトを追加しようとしました。

現在、jQuery Mobile 1.4.1 alpha 2 と Swiper 2.1.0 を使用しています。

私の質問: スクリプトを機能させるための適切なシーケンスは何ですか?また、上記のページ イベントのどれがトリックを実行する必要がありますか? 御時間ありがとうございます。

スワイパーの HTML は次のようになります。

<div class="swiper-container">
        <div class="swiper-wrapper">

        <div class="swiper-slide">
<div class="picture"><img src="image1.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket "  id="productImage" /></div>
        </div>
<div class="swiper-slide"><div class="picture">
      <img src="image2.jpj" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
      </div></div>
<div class="swiper-slide"><div class="picture">
      <img src="image3.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
      </div></div>
      </div>
    </div>

jQuery および jQuery Mobile ファイルは、ページの下部に読み込まれます。

    <script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.min.js"></script>
<script>
    $(document).on('pagecreate', function(){
        $( "#leftPanel" ).trigger( "updatelayout" );

        $.mobile.defaultDialogTransition = 'slide';
        $.mobile.defaultPageTransition = 'slide';
        $.mobile.selectmenu.prototype.options.nativeMenu = false;

    });
</script>

<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/idangerous.swiper-2.1.min.js"></script>


<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.mobile-1.4.0-alpha.2.min.js"></script>

<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/boilerplate/helper.js"></script>
<script>
$('#productinfo').on('pageshow', function() {
  var mySwiper = new Swiper('.swiper-container',{
    centeredSlides: true,
    slidesPerView: 2,
    watchActiveIndex: true
  });
});
</script>
4

2 に答える 2

0

他の何かを解決しようとしているときに、この問題の解決策に出くわしました。私が構築していたサイトはphpを使用して生成されています。html はすでに埋め込まれているため、すべての製品情報ページは #product_info という同じ ID を持ち、スワイパーを含む div は常に #product_image の ID を持っていました。たとえば、id #product_image に php 関数を追加すると、次のようになります。

#product_image<?php echo $product_id; ?>

と同じようにスワイパーを与える

var mySwiper = new Swiper('#product_image<?php echo $product_id; ?>',{

ページをリロードする必要がなくなりました。それが誰かを助けることを願っています。

于 2014-04-02T02:44:59.890 に答える