如何在一个jQuery UI Tab中使用jQuery UI Tabs? [英] How to use jQuery UI Tabs inside one jQuery UI Tab?

问题描述

我正在使用jQuery UI选项卡(通过AJAX进行的内容)，我需要做的是，在我的一个选项卡中，我希望其他简单的jQuery UI选项卡表示(不是通过AJAX进行的内容) ，但不起作用. 如果我做错了什么，请原谅:(

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>

我已经在xyz控制器的视图中添加了以下代码，但是它不起作用

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>

我已经包含了所有这些

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

推荐答案

正如Kevin B所指出的那样，用于在xyz控制器内部创建选项卡的脚本会立即执行.

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

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

在您单击"C"选项卡以加载此数据时，已经触发了documnent.ready事件.该文档暗示但并未明确指出AJAX内容是延迟加载的，表示在该标签上单击之前，它不会发出请求.但是，如果您检查网络流量，则可以清楚地看到这种情况.

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.

在所有选项卡的HTML内容本身之后，尝试更改'xyz'控制器的内容，使其具有<script>标记以最后设置tabss.像这样:

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 和

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.

这篇关于如何在一个jQuery UI Tab中使用jQuery UI Tabs?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！