asp.net-mvc - 在 Kendo 选项卡条中将选项卡附加到左侧

Question

我们可以通过使用剑道标签条中的功能将标签附加到右侧append（新点击的按钮在最右边创建标签，即最后一个标签），如代码here。

但我需要将标签附加到左侧，即；新单击的按钮在最左侧创建选项卡（即第一个选项卡）。

我们有insertbefore在活动选项卡右侧创建选项卡的功能，但它至少需要在<li>元素上<ul>，我想在最左边添加选项卡，即；第一个选项卡，与活动选项卡无关。

Answer 1

以下是您问题的代码，它将在左侧添加选项卡并选择新添加的选项卡。

    <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>