asp.net-mvc - 剣道タブストリップの左にタブを追加

Question

Code hereのように、剣道タブ ストリップの関数を使用して、Right にタブを追加できますappend(新しくクリックされたボタンは、一番右にタブを作成します。つまり、最後のタブ) 。

しかし、左にタブを追加する必要があります。新しくクリックされたボタンは、左端 (つまり、最初のタブ) にタブを作成します。

insertbeforeアクティブなタブの右側にタブを作成する機能がありますが、少なくとも要素が必要で<li>、<ul>左端にタブを追加したいです。アクティブなタブに関係なく、最初のタブ。

Answer 1

Following is the code for your question which will add the Tab at the Left and will select the newly added one.

    <div id="example">

        <div class="box">

        <div class="box-col">
            <h4>&nbsp;</h4>
            <ul class="options">
                <li>
                    <input type="text" value="Item" id="beforeText" class="k-textbox"/> <button class="beforeItem k-button">Insert Before</button>
                </li>
               </ul>
        </div>
        </div>

        <div class="demo-section k-header">
            <div id="tabstrip">
                <ul>
                    <li class="k-state-active">
                        Baseball
                    </li>

                </ul>
                <div>
                    <p>Hello</p>
                </div>

            </div>
        </div>
        <script>
            $(document).ready(function() {
                var getItem = function (target) {
                        var itemIndex = target[0].value;

                        return tabStrip.tabGroup.children("li").eq(itemIndex);
                    },


                    before = function (e) {
                       tabStrip.select(0);
                        if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                            tabStrip.insertBefore({
                                text: $("#beforeText").val(),
                                content: "<br>"
                            }, tabStrip.select());
                        tabStrip.select(0);
                    };



                $(".beforeItem").click(before);
                $("#beforeText").keypress(before);

            });

            var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
        </script>
        <style scoped>
            .box-col {
                width: 230px;
            }
            .box .k-textbox {
                width: 80px;
            }
            .demo-section {
                width: 600px;
                min-height: 250px;
            }
        </style>
    </div>