How to use jQuery UI Tabs inside one jQuery UI Tab

问题:

i am using jQuery UI Tabs (Content via AJAX) what i need to do is that in one of my Tab i want other simple jQuery UI Tabs means (Content NOT via AJAX) but its not working.. pardon if i am doing something wrong :(

<div id="tabs">  //these tabs are working fine
  <ul>
      <li><a href="<?php echo $this->url(array(), 'abc')  ?>">A</a></li>
      <li><a href="<?php echo $this->url(array(), 'asd')  ?>">B</a></li>
      <li><a href="<?php echo $this->url(array(), 'xyz')  ?>">C</a></li>
  </ul>

I have add the below code in the view of my xyz controller but its not working

<script>
     $(function() {
         $( "#tabss" ).tabs();
       });
</script>

<div id="tabss">
  <ul>
      <li><a href="#tabss-1">Nunc tincidunt</a></li>
      <li><a href="#tabss-2">Proin dolor</a></li>
      <li><a href="#tabss-3">Aenean lacinia</a></li>
  </ul>

<div id="tabss-1">
  <p>abcd.......</p>
</div>

<div id="tabss-2">
  <p>xyz.......</p>
</div>

<div id="tabss-3">
  <p>abcd.......</p>
   <p>content.......</p>
</div>

i have already included all these

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

回答1:

As Kevin B points out, your script to create the tabs inside the xyz controller is executed immediately.

<script>
     $(function() {
         $( "#tabss" ).tabs();
       });
</script>

The documnent.ready event has already fired by the time you can click on the 'C' tab to get this data loaded in. The documentation implies, but doesn't clearly state, that the AJAX content is lazy-loaded, meaning it doesn't make the request until the tab is clicked on it. But if you inspect the network traffic, you can clearly see this is the case.

Try changing the content of your 'xyz' controller to have the <script> tag for setting up the tabss last, after all the HTML for the tabs content themselves. Like this:

<div id="tabss">
  <ul>
      <li><a href="#tabss-1">Nunc tincidunt</a></li>
      <li><a href="#tabss-2">Proin dolor</a></li>
      <li><a href="#tabss-3">Aenean lacinia</a></li>
  </ul>

<div id="tabss-1">
  <p>abcd.......</p>
</div>

<div id="tabss-2">
  <p>xyz.......</p>
</div>

<div id="tabss-3">
  <p>abcd.......</p>
   <p>content.......</p>
</div>

<script>
     $(function() {
         $( "#tabss" ).tabs();
       });
</script>

Yahoo and several other sources reccommend placing any on-page script at the end of the page anyways, even if you are using a library to delay execution until document.ready. This is for client side performance reasons.

回答2:

i got solution for this issue.

put script in page load function in javascript

   function pageLoad(sender, args) {
        $(document).ready(function () {
            $("#tabs").tabs();
        });
    }

Now its working perfect.