Question

我们可以在kendo标签条中使用append函数（最右边的按钮创建最右边的标签，即最后一个标签），例如Code here，将标签附加到右侧。

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

我们有insertbefore函数用于创建活动标签右侧的标签，但它至少需要<li>的{{1}}元素，我想在最左边添加标签，即;第一个选项卡，与“活动”选项卡无关。

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>

在Kendo Tab Strip中向左添加选项卡

1 个答案: