0

我在一个——你猜对了——响应式项目上使用了Response JS和Flexslider 。根据视口的大小，该站点的幻灯片分页器将位于 2 个不同的位置，我正在使用 Response JS 填充该代码。但是，问题在于 Flexslider 在 Response JS 填充寻呼机代码之前进行了初始化，因此 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 回答