如何将 AJAX 加载添加到 Niall Doherty 的 Coda Slider？

Question

我正在将 Niall Doherty 的 Coda Slider 实现到网页正文中。问题是我的客户拥有的内容量给页面带来了大量的加载时间。

我想做的是将内容分割成单独的 html 文件，然后单击选项卡触发器，加载内容，然后为开关设置动画。

老实说，我不知道如何做到这一点，所以遗憾的是我无法提供任何虚假代码来帮助说明我的观点。任何和所有的帮助将不胜感激。我在 Coda 论坛上搜索过这样的解决方案，但我得到的只是人们声称拥有它，但无意提供帮助。

干杯。

Answer 1

最简单的方法是将其存储在一个 html 文件中，并

直接从 jquery 文档中使用 load() 检索它：

$('#result').load('ajax/test.html #container');

当该方法执行时，它会检索 ajax/test.html 的内容，然后 jQuery 解析返回的文档以查找 ID 为容器的元素。该元素及其内容将被插入到 ID 为 result 的元素中，而检索到的文档的其余部分将被丢弃。

如果这仍然很慢，只需将其分成多个页面，然后一次加载一页，

$('#result').load('ajax/test.html');

我不完全确定这是最好的方法，但你可以这样做：

    <script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="javascripts/jquery.coda-slider-2.0.js"></script>
     <script type="text/javascript">
        $().ready(function() {
            $('#coda-slider-1').codaSlider();
            $("#panel1").load("panel1.html");//populate on load
            $("li.tab1 a").click(function() {
                $("#panel1").load("panel1.html");//populate on click
            });
            $("li.tab2 a").click(function() {
                $("#panel2").load("panel2.html");
            });
        });

     </script>

将 id 添加到 div class="panel-wrapper" id= “面板1”

<div class="coda-slider-wrapper">
        <div class="coda-slider preload" id="coda-slider-1">
            <div class="panel">
                <div class="panel-wrapper" id="panel1">
                    <h2 class="title">Panel 1</h2>
                    <p></p>
                </div>
            </div>
            <div class="panel">
                <div class="panel-wrapper" id="panel2">
                    <h2 class="title">Panel 2</h2>
                    <p></p>
                </div>
            </div>
            <div class="panel">
                <div class="panel-wrapper" id="panel3">
                    <h2 class="title">Panel 3</h2>
                    <p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Sed lacus quam, sodales sit amet feugiat sit amet, viverra nec augue. Sed enim ipsum, malesuada quis blandit vel, posuere eget erat. Sed a arcu justo. Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit. Vestibulum consequat augue et turpis condimentum mollis sed vitae metus. Morbi leo libero, tincidunt lobortis fermentum eget, rhoncus vel sem. Morbi varius viverra velit vel tempus. Morbi enim turpis, facilisis vel volutpat at, condimentum quis erat. Morbi auctor rutrum libero sed placerat. Etiam ipsum velit, eleifend in vehicula eu, tristique a ipsum. Donec vitae quam vel diam iaculis bibendum eget ut diam. Fusce quis interdum diam. Ut urna justo, dapibus a tempus sit amet, bibendum at lectus. Sed venenatis molestie commodo.</p>
                </div>