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

Question

你好，代码大师和jQuery专家！

--------------编辑----------------

好了，凯文·乙指出的那样，我什么想要实现将无法工作，因为标签内容标签不能超出#tab分区，然后再次，我已经建立了jQuery UI标签与旧的jQuery UI版本，它的工作！检查它在这里：http://raimondsblums.lv/freelance/ajax4/

问题是，我绝对不知道如何应用ajax这个例子！

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

以下是我有：http://raimondsblums.lv/freelance/ajax2/ 花很多时候让我用ajax来拉动这些滑动条，因为我对javascript的知识与我关于脑部手术的知识非常相似，而这些知识都没有。好吧，也许不是那么糟糕！

所以一切工作都很好，除了一部分 - 当使用axaj与jQuery UI选项卡时，那些类=“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))); 

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

UPDATE
这里是一个解决方法：

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

每次添加一个选项卡，它将被附加到相应的div。我没有测试过这个，但理论上它应该起作用。让我知道它是如何为你工作的。