带有 ajax 和 jQuery 滑块的 jQuery UI 选项卡。 95% 完成

Question

您好，代码专家和 jQuery 专家！

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

好的，正如 Kevin B 指出的那样，我想要实现的目标是行不通的，因为标签内容标签不能在#tab div 之外，然后我再次使用较旧的 jQuery Ui 版本构建了 jQuery UI 标签它在哪里工作！在这里查看：http://raimondsblums.lv/freelance/ajax4/

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

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

这是我所拥有的：http://raimondsblums.lv/freelance/ajax2/ 当我使用 ajax 拉动这些滑块时，我花了很多时间来使这些滑块工作，因为我对 javascript 的了解与我对脑外科手术的了解非常相似，但没有。好吧，也许没那么糟糕！

所以除了一部分之外，一切都正常工作 - 当使用带有 jQ​​uery UI 选项卡的 axaj 时，那些带有 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 选项卡小部件中的行，它们阻止您执行您正在尝试执行的操作。 （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 中。我没有对此进行测试，但理论上它应该可以工作。让我知道它是如何为您工作的。