0

ご想像のとおり、レスポンシブ プロジェクトでResponse JSとFlexsliderを使用しています。サイトのスライドショー ページャーは、ビューポートのサイズに応じて 2 つの異なる場所に表示されます。私は Response JS を使用してそのコードを設定しています。ただし、問題は、Response JS がページャー コードを入力する前に Flexslider が初期化されるため、Flexslider が使用するはずのページャーを見つけられないことです。

Response JS がページでその魔法を終了した後にのみ、Flexslider プラグインを初期化する方法はありますか?

私のマークアップは次のようになります。

<body data-responsejs='{
    "create": [
    { "breakpoints": [0,320,481,641,961], "mode": "markup", "prefix": "r" }
    ]}'
>
    <div data-r961="
        <ul class=&quot;flexslider-pager&quot;>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
        </ul>
    "></div>

    <div class="flexslider"><!-- Slideshow Here --></div>

    <div data-r481="
        <ul class=&quot;flexslider-pager&quot;>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
        </ul>
    "></div>

    <script src="jquery.js"></script>
    <script src="response.js"></script>
    <script src="flexslider.js"></script>
    <script>
        $('.flexslider').flexslider({
            manualControls: '.flexslider-pager li',
        });
    </script>
</body>

ページの先頭に jQuery と Response JS を追加しようとしましたが、うまくいきませんでした。

4

1 に答える 1

0

だから私は間違いなく非常に醜い解決策を思いついた：

function runPlugins(){
    $('.flexslider').flexslider();
};

Response.create({ 
    mode: 'markup', 
    prefix: 'r', 
    breakpoints: [0,600,820,901] 
}); 

jQuery(runPlugins);

body タグから Response JS データ属性を取り出し、代わりに Response.create メソッドを使用しました。次に、プラグインが関数を呼び出すようにし、応答データ属性を作成した後に関数を呼び出すことを誰かが提案しました。なぜ機能するのかわかりませんが、機能します。

于 2012-09-09T18:35:50.100 に答える