0

我有一个从 URLContent 加载页面的选项卡。

我想完成以下工作：

  • 如果具有目标 URL 的选项卡已打开，请选择现有选项卡，而不是附加新选项卡。
  • 如果它是一个新选项卡，请动态附加该选项卡并加载它。

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

http://docs.kendoui.c​​om/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
    });
}
4

1 回答 1

3

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

我建议保留一个关联数组，其中键保存idtabstrips （或者url如果你喜欢的话），并将打开它的 tabstrip 的索引作为值url。

当onSelect在树中触发时，您检查我们是否已经创建了该选项卡，如果是，我们只需选择它。如果它没有被创建，我们将一个新元素添加到关联数组中，并将append一个新项目添加到标签条中。

在下面的实现中，我选择了保存为data与代表 TabStrip 的 HTML 元素相关联。

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

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

编辑：由于IE8Object.index似乎不支持，这里有一个不同的实现不使用它：

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") || { items: 0 };
    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] = ++data.items;
        mainVerticalTabStrip.element.data("my-data", data);
    }
    mainVerticalTabStrip.select(data[selectedNodeText] - 1);
}
于 2013-03-26T12:35:15.270 回答