javascript - 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 东西)。

Answer 1

这是我为您准备的一个快速演示。

Closable tabs in Kendo

基本上我做了两件事:

1)添加一个span标签，其数据属性指示选项卡的索引

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

    }); 

  }); 

希望这就是您在剑道中寻找的东西。