2012-09-10 90 views
0

我有一個由動態生成的標籤組成的小部件。每個標籤由7名手風琴家組成。當我動態生成選項卡時,我也動態地添加了Accordians。沒有我需要的是一個單擊處理程序,它有一個事件參數,指定哪個手風琴已被點擊,以便我可以將相應的數據添加到該手風琴的div。代碼看起來有點像這樣添加點擊事件動態生成的手風琴jquery

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

我希望你得到我的問題是。 請幫我出去

回答

0

找到了更好的方法。 我不是在同一個文件中添加手風琴,而是將它們添加到另一個html文件,並通過ajax(以及JQuery處理所有的ajax加載)將該HTML的內容加載到我的標籤中。我不得不添加唯一的辦法就是將手風琴的選項卡的負載情況下保持手風琴UI

2

調用Ajax的標籤上的點擊
只設置選項卡只是HREF屬性,其調用Ajax的網址爲特定的標籤div。

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/

相關問題