Question

嗨，我需要你的帮助，我需要一个tabtrip上的关闭按钮，但动态....我的按钮问题，首先选择选项卡然后关闭......这是我的代码，。我用kendo ui。这一切都是动态的，

<div class="configuration k-widget k-header">
    <span class="configHead">API Functions</span>
    <ul class="options">
        <li>
            <input type="text" value="0" id="tabIndex" class="k-textbox"/> <button class="selectTab k-button">Select</button>
        </li>
        <li>
            <button class="removeItem k-button">Remove Selected</button>
        </li>
        <li>
            <input type="text" value="" id="appendText" class="k-textbox"/> <button class="appendItem k-button">Append</button>
        </li>


    </ul>
    <div>
    <img src="../../Content/kendo/2013.1.514/images/icono_cerrar.gif" alt="cerrar_todo" id="close" onclick="cerrar(this)"  align="right" style= 'valign:top; cursor: pointer;'/>
    </div>
</div>

<div style="width: 1236px;">
    @(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Items(tabstrip =>
          {

              tabstrip.Add().Text("Bsoft")
                   .Content(@<text>
                   <center>
              <img src="../../Content/kendo/2013.1.514/images/bsoftLarge.jpg" alt="bsoft" />   
              </center>
                </text>);

          })
          .SelectedIndex(0)
    )
</div>

<script>
    $(document).ready(function () {
        var tabStrip = $("#tabstrip").data("kendoTabStrip");

        var getItem = function (target) {

            var itemIndex = target[0].value;

            return tabStrip.tabGroup.children("li").eq(itemIndex);
        }, 
           select = function (e) {
               if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                   tabStrip.select(getItem($("#tabIndex")));
           },
           append = function (e) {
               if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)

                   tabStrip.append(
                {
                        text:$("#appendText").val(),
                      //  text: " <a href='#' data-bind='click: clear'> <span class='k-icon k-i-close'></span>",
                        //imageUrl: "/Content/kendo/2013.1.514/images/icono_cerrar.png"
                      //  content: "<img src='/Content/kendo/2013.1.514/images/Penguins.jpg' alt=contenido /><br> Es una prueba del contenido"

                    });


           };

        $("#tabstrip").on("click", " .k-tabstrip-items .k-item img", function (ImgObj) {
            debugger

             var tab = tabStrip.select(),
              otherTab = tab.next();
             otherTab = otherTab.length ? otherTab : tab.prev(); 
              tabStrip.remove(tab);
              tabStrip.select(otherTab);
        });

        $(".toggleTab").click(function (e) {
            var tab = tabStrip.select();

            tabStrip.enable(tab, tab.hasClass("k-state-disabled"));
        });

        $(".removeItem").click(function (e) {
            var tab = tabStrip.select(),
                otherTab = tab.next();
            otherTab = otherTab.length ? otherTab : tab.prev();

            tabStrip.remove(tab);
            tabStrip.select(otherTab);
        });
        $(".selectTab").click(select);
        $("#tabIndex").keypress(select);

        $(".appendItem").click(append); //text input
        $("#appendText").keypress(append); // button
    });
    function cerrar(ImgObj) {
        debugger
        var aux=1;
        var tabStrip = $("#tabstrip").data("kendoTabStrip");
        var tabcount = tabStrip.contentAnimators.length;
        while (aux >= 1 && aux < tabcount) {
            var aa = $(ImgObj).closest("li").text();
            tabStrip.remove($(ImgObj).closest("li").index());
            aux = aux + 1;
        }   
    }

</script>
<style scoped>
    .configuration .k-textbox {
        width: 40px;
    }
.k-image
{
    float:right;
    margin-left:7px;
}

</style>

Answer 1

你必须在所有标签的内容中创建关闭按钮，所以当你点击标签的特定关闭按钮然后关闭该标签时..

   <input type='button' value='X' onClick='closeTab($j(this).closest("li"));'>

Answer 2

@(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Events(events => events.Select("onSelect"))
          .Items(tabstrip => {
              tabstrip.Add().Text("Home")
                  .Content("").Visible(false);
          })
      )

JS：

function onSelect(e) {
        $(e.item)[0].innerHTML = "<span class=\"k-loading k-complete\"></span>"+
                                 "<span class=\"k-link\"style='font-size: 12px !important; padding-right:5px;'>" +
                                 $(e.item).find("> .k-link").text()+
                                 "<input class='pwButtonClose' type='button' onClick='closeTab($(this).closest(\"li\"));'></span>";
    }

CSS：

.pwButtonClose {
    border: 0;
    background-color: transparent;
    margin-left: 5px;
    background-image: url(../content/images/close.png);
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    padding: 0;
}

添加一个按钮以动态关闭标签 - kendo ui

2 个答案: