0

動的に生成されたタブで構成されるウィジェットがあります。各タブは 7 つのアコーディオンで構成されています。タブを動的に生成するので、アコーディオンも動的に追加します。いいえ、必要なのは、クリックされたアコーディオンを指定するイベント引数を持つシングルクリックハンドラーであり、そのアコーディオンの div にそれぞれのデータを追加できます。コードは次のようになります

 <div class='tab' id='idCallDetailTab'>
        <ul>
            <?php $i=0; foreach ($this->Asp as $item) { $i++; ?>
            <li><a href="#etabs-<?php echo $i; ?>"><?php echo $item['asp']; ?></a></li>
            <?php } ?>
        </ul>
        <?php $i=0; foreach ($this->Asp as $item) { $i++;  ?>
            <div id="etabs-<?php echo $i; ?>" >
            </div>

            <script type="text/javascript">
                var accordian = '<div class="accordion"><h4><a href="#">CallLogin</a></h4><div id="acclogin-<?php echo $i; ?>"></div><h4><a href="#">Call Allocate</a></h4><div id="accallocate-<?php echo $i; ?>"></div><h4><a href="#">Call Attend</a></h4><div id="accattend-<?php echo $i; ?>"></div><h4><a href="#">Call Dispatched</a></h4><div id="accdispatched-<?php echo $i; ?>"></div><h4><a href="#">Call Part Indent</a></h4><div id="accindent-<?php echo $i; ?>"></div><h4><a href="#">Call transfer</a></h4><div id="acctransfer-<?php echo $i; ?>"></div><h4><a href="#">Call Part Recieved</a></h4><div id="accreceived-<?php echo $i; ?>"></div></div>';                 

                $('#etabs-<?php echo $i; ?>').html(accordian);
                $('#acclogin-<?php echo $i; ?>').html('100');
                $('#accallocate-<?php echo $i; ?>').html('200');
                $('#accattend-<?php echo $i; ?>').html('300');
                $('#accdispatched-<?php echo $i; ?>').html('400');
                $('#accindent-<?php echo $i; ?>').html('500');
                $('#acctransfer-<?php echo $i; ?>').html('600');
                $('#accreceived-<?php echo $i; ?>').html('700');
            </script>

        <?php } ?>
    </div >
4

2 に答える 2

2

タブクリックでAjaxを呼び出す：タブのhref
属性を 設定するだけで、特定のタブdivのAjax URLを呼び出します。

http://jqueryui.com/demos/tabs/ajax.html

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
</div>

ここのオプションでさらにカスタマイズできます。
http://jqueryui.com/demos/tabs/

于 2012-09-12T07:52:31.583 に答える
0

より良いアプローチを見つけました。同じファイルにアコーディオンを追加する代わりに、それらを別の html ファイルに追加し、その HTML のコンテンツを ajax 経由でタブにロードしました (JQuery がすべての ajax ロードを処理しました)。追加する必要があったのは、タブのロード イベントにアコーディオンを適用して、アコーディオン UI を維持することだけでした。

于 2012-09-12T07:07:20.883 に答える