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 文件中，并通过 ajax 将该 HTML 的内容加载到我的选项卡中（JQuery 处理了所有 ajax 加载）。我唯一需要添加的是将手风琴应用于选项卡的加载事件以维护手风琴 UI

于 2012-09-12T07:07:20.883 回答