内部带有 ajax 和 jQuery slider 的 jQuery UI 选项卡。 95% 完成

Question

代码大师和 jQuery 专家大家好!

--------------已编辑----------------

好吧，正如 Kevin B 指出的那样，我想要实现的目标是行不通的，因为选项卡内容标签不能位于 #tab div 之外，话又说回来，我已经使用较旧的 jQuery Ui 版本构建了 jQuery UI 选项卡它在哪里起作用了!在这里查看:http://raimondsblums.lv/freelance/ajax4/

问题是我完全不知道如何将ajax应用到这个例子中!

--------------编辑结束----------------

这是我所拥有的:http://raimondsblums.lv/freelance/ajax2/ 我花了很多时间才让这些 slider 在使用 ajax 拉动时工作，因为我对 javascript 的了解与我对脑部手术的了解非常相似，而脑部手术的知识则完全不同。好吧，也许没那么糟糕!

因此，除了一部分之外，一切都工作正常 - 当将 axaj 与 jQuery UI 选项卡一起使用时，会生成那些带有 class="ui-tabs-panel"的 DIV。它们是在选项卡按钮之后生成的， 所以目前看起来像这样:

<div id="tabs">
  <ul>
    <li><a href="projekts0.html">Preloaded</a></li>
    <li><a href="projekts1.html">Tab 1</a></li>
    <li><a href="projekts2.html">Tab 2</a></li>
  </ul>
  <div id="ui-tabs-1" class="ui-tabs-panel"><div class="flexslider"></div></div>
  <div id="ui-tabs-2" class="ui-tabs-panel"><div class="flexslider"></div></div>
  <div id="ui-tabs-3" class="ui-tabs-panel">unrelated content, just for testing if it works</div>
</div>

我希望它看起来像这样:

<div class="bildiic">
  <div id="ui-tabs-1" class="ui-tabs-panel"><div class="flexslider"></div></div>
  <div id="ui-tabs-2" class="ui-tabs-panel"><div class="flexslider"></div></div>
  <div id="ui-tabs-3" class="ui-tabs-panel">unrelated content, just for testing if it works</div>
</div>

<div id="tabs">
  <ul>
    <li><a href="projekts0.html">Preloaded</a></li>
    <li><a href="projekts1.html">Tab 1</a></li>
    <li><a href="projekts2.html">Tab 2</a></li>
  </ul>
</div>

我发现这个函数确实有效(它在源代码中，我已经注释掉了)并将这些 ui-tabs-panel 放在特定的标签中:

<script>
$(function() {
  $('.ui-tabs-panel').appendTo('.bildiic');
});
</script>

但这会搞砸 jQuery Ui 选项卡功能，并且选项卡停止工作...

至此我的知识就结束了，我不知道如何修复这些功能以使其全部正常工作!

救命!

Answer 1

由于选项卡小部件的构建方式，它不会以这种方式工作。它的设计目的不是让面板存在于选项卡小部件之外。您可能最好构建一些外观和行为类似于选项卡的自定义内容，但不依赖于选项卡小部件。

这些是来自 jquery ui tabs 小部件的行，它们会阻止您执行您想要执行的操作。 (self.element.find 部分)。

// inline tab
if ( fragmentId.test( href ) ) {
    self.panels = self.panels.add( self.element.find( self._sanitizeSelector( href ) ) );

面板必须是选项卡容器的子级。

更新
这是一个解决方法:

$("#tabs").tabs({
    add: function(e, ui){
        $(".bildiic").append(ui.panel);
    }
});

每次添加选项卡时，它都会附加到相应的 div 中。我还没有测试过这个，但理论上它应该有效。让我知道它对您有何作用。