Question

我有一个从URLContent加载页面的标签页。

我想完成以下任务：

如果已打开包含目标网址的标签，请选择现有标签，而不是附加新标签。
如果是新标签页，请动态附加标签并加载。

从文档中，似乎没有默认的处理方式。

http://docs.kendoui.com/api/web/tabstrip

此外，我想知道是否有任何方法可以动态检索标签的ID /名称，并给出标签索引。

以下是我正在初始化Tabstrip的方法：

<div class="mainContentTabStrip" style="width:100%;height:100%">
    <kendo:tabStrip name="mainVerticalTabStrip">
        <kendo:tabStrip-animation>
            <kendo:tabStrip-animation-open effects="fadeIn" />
        </kendo:tabStrip-animation>
    </kendo:tabStrip>       
</div>

然后添加一个新标签：

function mainContentTreeView_onSelect(e) 
{
    var dataItem = $("#mainVerticalMenu").data("kendoTreeView").dataItem(e.node);

    var selectedNodeText = dataItem.text;
    var selectedNodeValue = dataItem.id;

    var mainVerticalTabStrip = $("#mainVerticalTabStrip").data("kendoTabStrip");
    mainVerticalTabStrip.append({
        text: selectedNodeText + 
            "  <img src='image/image/button_cancel.png' " + 
            "id='" + this.text(e.node) + "' " + 
            "name='" + this.text(e.node) + "' " + 
            "onclick='javascript:mainContentTreeView_delete()' " + 
            "onmouseover=" + this.text(e.node) + ".src='image/image/button_cancel_over.png' " +
            "onmouseout=" + this.text(e.node) + ".src='image/image/button_cancel.png' " +
            ">",
        encoded: false,
        contentUrl: "screen/" + selectedNodeValue,
        selected: true
    });
}

Answer 1

你需要一些编程......没有开箱即用的功能。

我建议保留一个关联数组，其中key保存tabtrips的id（如果你愿意，保存url），并将值打开为{{1}的标签的索引}。

在树中触发url时，检查是否已创建该选项卡，如果是这样，我们只选择它。如果没有创建它，我们将一个新元素添加到关联数组中，并onSelect一个新项目到tabstrip。

在以下实现中，我选择保存为与代表TabStrip的HTML元素关联的append。

data

在此处运行示例：http://jsfiddle.net/OnaBai/czPFs/

编辑：由于function mainContentTreeView_onSelect(e) { var mainTreeView = $("#mainVerticalMenu").data("kendoTreeView"); var mainVerticalTabStrip = $("#mainVerticalTabStrip").data("kendoTabStrip"); var dataItem = mainTreeView.dataItem(e.node); var selectedNodeText = dataItem.text; var selectedNodeValue = dataItem.id; var data = mainVerticalTabStrip.element.data("my-data") || []; if (!data[selectedNodeText]) { mainVerticalTabStrip.append({ text: selectedNodeText + " <img src='image/image/button_cancel.png' " + "id='" + this.text(e.node) + "' " + "name='" + this.text(e.node) + "' " + "onclick='javascript:mainContentTreeView_delete()' " + "onmouseover=" + this.text(e.node) + ".src='image/image/button_cancel_over.png' " + "onmouseout=" + this.text(e.node) + ".src='image/image/button_cancel.png' " + ">", encoded: false, contentUrl: "screen/" + selectedNodeValue }); data[selectedNodeText] = Object.keys(data).length + 1; mainVerticalTabStrip.element.data("my-data", data); } mainVerticalTabStrip.select(data[selectedNodeText] - 1); }似乎not be supported in IE8，所以这里有一个不同的实现：

Object.index

Kendo Tabstrip可防止重复的标签打开

1 个答案: