Как разделить список вкладок Kendo Tabstrip и элементы содержимого в html?

Question

Итак, я работаю с кендо в JS. Я хотел бы использовать вкладку, но хотел бы, чтобы вкладки содержались в заголовке, который стилизован и содержал некоторые другие элементы, поэтому мне интересно, есть ли способ разделить список вкладок и связанные с ними элементы 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 соответствует порядку списка. Есть ли способ достичь такого рода вещи?

Изменить: чтобы уточнить, я ищу способ отображения div-элементов tabcontent за пределами заголовка. Меня не волнует, где в HTML находятся настоящие div, скорее, где они появятся, когда будут сгенерированы на странице.

Answer 1

Хорошо, я понял это. Я не думаю, что есть способ напрямую прикрепить 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();

Answer 2

Первым решением было бы оставить пустые элементы типа:

<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()
    });