0

URLContentからページをロードするタブストリップがあります。

私は次のことを達成したいと思います：

  • ターゲットURLのタブがすでに開いている場合は、新しいタブを追加する代わりに、既存のタブを選択します。
  • 新しいタブの場合は、タブを動的に追加してロードします。

ドキュメントから、これを処理するデフォルトの方法はないようです。

http://docs.kendoui.c​​om/api/web/tabstrip

また、タブインデックスを指定して、タブのID/名前を動的に取得する方法があるかどうかを知りたいです。

タブストリップを初期化する方法は次のとおりです。

<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

プログラミングが必要です...すぐに使えるそのような機能はありません。

id私が提案するのは、キーがタブストリップの（または必要にurl応じて）保存する連想配列と、それを開くタブストリップのインデックスを値として保持すること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/

編集：IE8ではサポートされていないようObject.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 に答える