如何在 html 中分离 Kendo Tabstrip 选项卡列表和内容 div？

Question

所以，我在 js 中使用 kendo。我想使用标签条，但我希望将标签包含在 header 中，该 header 具有样式并包含一些其他元素，所以我想知道是否有一种方法可以将标签列表和他们相关的div。我想要这样的东西：

<div class="border">
  <div class="header">
    <div id="tabstriplist">
      <ul>
        <li id="tab1">First tab</li>
        <li id="tab2">Second tab</li>
      </ul>
    </div>
    <div>Some other text</div>
  </div>
  <div class="content">
    <div id="tabcontent1">Stuff</div>
    <div id="tabcontent2">Stuff</div>        
  </div>
</div>

但是，我能找到的所有示例代码似乎只是将关联的 div 紧跟在列表之后，因此 div 的顺序与列表顺序相对应。有什么办法可以完成这种事情吗？

编辑： 澄清一下，我正在寻找一种方法来显示 header 的 tabcontent div 外部。我真的不关心 在 html 中的实际 div 的位置，而是关心它们在页面上生成时出现的位置。

Answer 1

第一个解决方案是保留空的 div，例如：

<div class="border">
  <div class="header">
    <div id="tabstriplist">
      <ul>
        <li id="tab1">First tab</li>
        <li id="tab2">Second tab</li>
      </ul>
      <div></div>
       <div></div>
    </div>
    <div>Some other text</div>
  </div>
  <div class="content">
    <div id="tabcontent1">Stuff</div>
    <div id="tabcontent2">Stuff</div>        
  </div>
</div>

然后随时设置选项卡内容

$(document).ready(function() {
  var tabstrip = $("#tabstriplist").kendoTabStrip().data("kendoTabStrip");

var item = tabstrip.contentElement(0);
//replace the first tab content
$(item).html($("#tabcontent1").html());
});

或者动态地创建整个标签条：

<div id="tabstrip"></div> 
    <div class="content">
    <div id="tabcontent1">Stuff</div>
    <div id="tabcontent2">Stuff2</div>        
  </div>

和JS初始化像：

var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip"); 

  tabstrip.append({
      text: "Firts tab",
      content: $("#tabcontent1").html()
    });
  tabstrip.append({
      text: "Second tab",
      content: $("#tabcontent2").html()
    });

Answer 2

好的，我明白了。我不认为有一种方法可以直接将内容 div 附加到选项卡，但是您可以使用选项卡条的 "show" 或 "select" 事件实现相同的功能。这是我最后写的，归结起来。

Html:

<div class="border">
  <div class="header">
    <div id="tabstriplist">
      <ul>
        <li id="tab1">First tab</li>
        <li id="tab2">Second tab</li>
      </ul>
      <div></div>
      <div></div>
    </div>
    <div>Some other text</div>
  </div>
  <div class="content">
    <div id="tabcontent1">Stuff1</div>
    <div id="tabcontent2">Stuff2</div>        
  </div>
</div>

Js:

$(document).ready(function () {
    function onTabSelect(selection) {
        var contents = $("#content").children();
        var tabNum = selection.contentElement.id.charAt(selection.contentElement.id.length - 1);
        for (i = 0; i < contents.length; i++) {
            if (tabNum - 1 === i) {
                $("#" + contents[i].id).show();
            }
            else {
                $("#" + contents[i].id).hide();
            }
        }
    }

    $("#tabstrip").kendoTabStrip({
        show: onTabSelect
    }).data("kendoTabStrip").select(0);

    $("#tabstrip-1").remove();
    $("#tabstrip-2").remove();

如何在 html 中分离 Kendo Tabstrip 选项卡列表和内容 div？

How to separate Kendo Tabstrip tab list and content divs in html?

kendo-ui

kendo-tabstrip