2

こんにちは、あなたの助けが必要です。タブストリップに閉じるボタンが必要ですが、動的に....ボタンに問題があります。最初にタブを選択してから閉じます...これは私のコードです..私が使用する剣道うい。これはすべて動的で、

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

2 に答える 2

4

すべてのタブのコンテンツに閉じるボタンを作成する必要があるため、タブの特定の閉じるボタンをクリックすると、そのタブが閉じます..

   <input type='button' value='X' onClick='closeTab($j(this).closest("li"));'>
于 2013-08-06T04:38:33.283 に答える