동적으로 탭 스트립에 닫기 버튼 추가 - kendo ui

Question

안녕하세요, 제발 도와주세요. 탭 스트립에 있지만 동적으로 닫기 버튼이 필요합니다 .... 제 버튼에 문제가 있습니다. 먼저 탭을 선택하고 닫기를 선택하십시오. ...... 이것은 내 코드입니다 .. 나는 검도를 사용합니다. 이 모든 것은 ..

<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

u는 그 탭을 닫습니다 그래서 유 탭 특히 닫기 버튼을 클릭하면 모든 탭의 내용에 닫기 버튼을 만들어야합니다, 동적 인

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