Закрытая вкладка в kendo ui

Question

Я внимательно посмотрел на documentation, но не смог найти что-то настолько популярное и чрезвычайно полезное во многих других библиотеках - я имею в виду закрываемые вкладки. Хотелось бы что-то типа:

$("#tabstrip").kendoTabStrip({ 
    dataTextField: "Name", 
    dataContentField: "Content", 
    dataSource: [ 
     { Name: "Tab1", Content: "Tab2: content", closable: true } // <-- this is what I want 
    ] 
}); 

Но, к сожалению. Я не мог найти ничего похожего на это, но я надеюсь, что существует простое решение (без большого количества фанковых css и js stuff).

Answer 1

Хорошо, вот краткий демоверсия, которую я выбил для вас.

Closable tabs in Kendo

По существу я сделал две вещи:

1) Добавить поверочного тег с атрибутом данных, указывающей индекс вкладки

<div id="tabstrip"> 
    <ul> 
     <li>Tab 1 <span style="border:1px solid red;" data-tab="0">*</span></li> 
     <li>Tab 2 <span style="border:1px solid red;" data-tab="1">*</span> </li> 
    </ul> 
    <div>Content 1</div> 
    <div>Content 2</div> 
</div> 

2) Добавлен событие щелчка на теги span, чтобы удалить вкладку, а затем переупорядочить номер вкладки.

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

    $(document).ready(function(){ 

    $("span[data-tab]").on('click',function(e){ 
     //indicate I am removing a tab 
     console.log("removing tab::"); 

     //find the tab I am removing based on click 
     var tabIndex = $(this).data("tab"); 

     //show tab index 0 positioned 
     console.log(tabIndex); 

     //remove tab. 
     tabStrip.remove(tabIndex); 

     //now find any remaining tabs and reindex them. 
     var reIndex = $("span[data-tab]"); 
     console.log(reIndex); 
     if(reIndex !== null && reIndex !== undefined && reIndex.length > 0) 
     { 
     var counter = 0; 
     reIndex.each(function(item){ 
      $(this).data('tab',counter); 
      counter++; 
     }); 
     } 

    }); 

    }); 

Надеюсь, это то, что вы ищете с кендо.