Question

我正在将Niall Doherty's Coda Slider实施到网页正文中。这个问题是我的客户端为页面带来了大量加载时间的内容量。

我想要做的是将内容拆分为单独的html文件，然后在单击选项卡触发器时，加载内容，然后为交换机设置动画。

老实说，我不知道如何做到这一点，所以我遗憾地无法提供任何虚假代码以帮助说明我的观点。任何和所有的帮助将非常感激。我在Coda论坛周围寻找过这样的解决方案，但我得到的只是声称拥有它并且无意帮助的人。

干杯。

Answer 1

最简单的方法是将其存储在一个html文件中并使用load（）

检索它

直接来自jquery docs：

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

当此方法执行时，它会检索ajax / test.html的内容，但随后jQuery会解析返回的文档以查找ID为container的元素。此元素及其内容将插入到具有结果ID的元素中，并且将丢弃检索到的文档的其余部分。

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

$('#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>

为div class =“panel-wrapper”添加ID id =“ panel1 ”

<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>

如何在Niall Doherty的Coda Slider中添加AJAX加载？

1 个答案: