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标签上添加了一个click事件，以删除该标签，然后重新排序标签号。

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

    }); 

  });

希望这是你想要使用剑道的东西。

在kendo ui中的可关闭选项卡

1 个答案: