2

Niall Doherty の Coda Sliderを Web ページの本文に実装しています。これに関する問題は、クライアントが持っているコンテンツの量がページの読み込みに膨大な時間を与えることです。

私がやりたいことは、コンテンツを個別の html ファイルに分割し、タブ トリガーをクリックしてコンテンツをロードし、スイッチをアニメーション化することです。

正直なところ、これを行う方法がわからないので、残念ながら、私の主張を説明するために偽のコードを提供することはできません. すべてのヘルプは非常に高く評価されます。私はそのような解決策を求めて Coda フォーラムを検索しましたが、私が得たのは、それを持っていると主張し、助けるつもりのない人々だけです。

乾杯。

4

1 に答える 1

2

最も簡単な方法は、それを 1 つの html ファイルに保存し、load() を使用して取得することです。

jqueryドキュメントから直接：

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

このメソッドが実行されると、ajax/test.html のコンテンツが取得されますが、jQuery は返されたドキュメントを解析して、container の ID を持つ要素を見つけます。この要素は、その内容とともに、ID が result の要素に挿入され、取得されたドキュメントの残りの部分は破棄されます。

これでも遅い場合は、複数のページに分割して、一度に 1 ページずつ読み込むだけです

$('#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=" 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>
于 2011-02-21T16:16:17.750 に答える