Kendo UI - 如何使用 javascript 添加和选择新选项卡（在 TabStrip 控件上）答案

【问题标题】：Kendo UI - How to add AND select a new Tab (on TabStrip control) using javascriptKendo UI - 如何使用 javascript 添加和选择新选项卡（在 TabStrip 控件上）
【发布时间】：2013-02-19 11:35:15
【问题描述】：

我创建了一个函数，可以在我的 Kendo UI TabStrip 控件中打开一个新选项卡：

function AddTab(targetUrl, title) {
        $("#tabstrip").data("kendoTabStrip").append({ text: title, contentUrl: targetUrl });
    }

这会将选项卡添加到末尾，但不会选择它。我怎样才能选择它成为活动标签！？是不是需要在创建tab的时候设置一个id，然后调用select(..)函数，还是一行行就可以？

我需要自动生成大量链接，每个链接都会采用不同的标题和 targetUrl。

【问题讨论】：

标签： javascript jquery kendo-ui

【解决方案1】：

试试这个

<div id="tabstrip">
  <ul>
    <li class="k-state-active">First Tab</li>
    <li>Second Tab</li>
  </ul>
  <div>
    First text
  </div>
  <div>
    Second text
  </div>
</div>
<input type="button" value="Add Tab" onclick="AddTab('google', 'http://google.com')" />


<script>
function AddTab(targetUrl, title) {
  var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
  tabStrip.append({ text: title, contentUrl: targetUrl, content: "Your content" });
  tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
</script>

参考link

【讨论】：

注意 - 您正在创建一个新的标签条，这将导致错误。你需要这个： var tabStrip = $("#tabstrip").data("kendoTabStrip");

【解决方案2】：

试试这样。 // 来自文档Kendo Ui tabstrip

var tabStrip = $("#tabStrip").data("kendoTabStrip");
tabStrip.insertAfter(
    { text: "New Tab" },
    tabstrip.tabGroup.children("li:last")
);

选择它

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

【讨论】：

嗨 Ravi，insertAfter() 似乎对我不起作用。我不知道为什么。不过谢谢，感激不尽。
要在当前选项卡之后添加一个选项卡，我必须这样做： var currentIndex = tabStrip.select().index(); tabStrip.insertAfter([{ text: 'New Tab', content: result }], tabStrip.tabGroup.children().eq(currentIndex));

【解决方案3】：

您可以使用 kendoui 添加和删除动态标签。我希望这段代码可以帮助一些人

<html>
<head>
<title> testing remote data </title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" /> 
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>

<input type='text' id='tabname' name='tabname'>
<input type="button" value="Add Tab" onclick="AddTab()" />
<div id="tabstrip">
</div>

<script>
$(document).ready(function () {
 $("#tabstrip").kendoTabStrip( {
            animation:  {
                open: {
                    effects: "fadeIn"
                }
            },
    select: function(element){selecttab(element)}           
        });

        });

function selecttab(element) {
var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"),
itemIdx = item.index();   
$("#tabstrip").data("kendoTabStrip").select(itemIdx);                
}

function AddTab(targetUrl) {
 var title = jQuery("#tabname").val();
 var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
  tabStrip.append({ text: title,
      content: "<div class='showtabcontent dhtmlgoodies_aTab' style='height: auto; display: block;' id='tabViewsubtabname'><div style='float:right;'><input type='button' value='X' onClick='closeTab($(this).closest(\"li\"));'></div><br><label class='evtgrouplables'>Description</label><br><textarea name='dynamic_other_content[]' id='dynamic_other_content' class='textareaeditor'></textarea><input type='hidden' name='dynamic_other_title[]' value=''/></div>"
  });
 tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
 }
function closeTab(vari){
 var tabStrip = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
 tabStrip.remove(tabStrip.select());
 tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
</script>

【讨论】：

【解决方案4】：

追加和选择新标签的代码：

  var tabs = $('#tabs').data('kendoTabStrip');
  var tabNum = tabs.items().length;
  var closeButton = 
    "<span unselectable='on' class='k-icon k-delete'>delete</span>";

  tabs.append( {
    encoded: false, //allow HTML
    text: team.name + ' ' + closeButton,
    contentUrl: 'teamschedule.html'
  });
  // make new tab the active tab
  tabs.select(tabNum);

  var tab = $(tabs.items()[tabNum]);
  //attach delete handler to the delete icon
  tab.on('click','.k-delete', tab, $scope.removeTab);

这里是删除标签并选择前一个的代码（如果选择了已删除的标签）：

$scope.removeTab = function(e) {
  var tabs = $('#tabs').data('kendoTabStrip');
  if (e.data.hasClass('k-state-active')) {
    //select previous tab if the active tab is removed
    tabs.select(e.data.prev());
  }
  tabs.remove(e.data);
}

我使用的是 angular，因此使用了 $scope。

【讨论】：