代码之家 › 专栏 › 技术社区 › Kristen Grote

延迟一个jQuery插件的初始化,直到另一个插件完成

flexslider responsive-design jquery

0

Kristen Grote · 技术社区 · 12 年前

我正在使用 Response JS 和 Flexslider 在一个你猜对了的响应项目上。根据视口的大小,该网站的幻灯片寻呼机将位于两个不同的位置,我正在使用ResponseJS来填充该代码。然而,问题是Flexslider在ResponseJS填充寻呼机代码之前进行初始化,因此Flexslider找不到它应该使用的寻呼机。

有没有一种方法可以在ResponseJS完成页面上的魔法后才初始化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和ResponseJS添加到页面的头部,但没有成功。

1 回复 | 直到 12 年前

1

0

Kristen Grote 12 年前

因此,我提出了一个毫无疑问是极其丑陋的解决方案:

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

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

jQuery(runPlugins);

我从body标记中去掉了ResponseJS数据属性,转而使用Response.create方法。然后有人建议我让插件调用一个函数,然后在创建响应数据属性后调用该函数。我不知道为什么它有效,但它确实有效。