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

时间:2013-03-26 03:15:24

标签: jquery html jsp kendo-ui

我有一个从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
    });
}

1 个答案:

答案 0 :(得分:3)

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

我建议保留一个关联数组,其中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