將標籤附加到Kendo標籤條的左邊

Question

我們可以通過在kendo標籤條中使用append功能將標籤附加到右邊（新點擊的按鈕創建最右邊的標籤即最後一個標籤），如Code here。

但我需要追加標籤左，即;新點擊的按鈕創建最左邊的選項卡（即第一個選項卡）。

我們有insertbefore用於創建活動選項卡的標籤右側的功能，但它至少需要<li>元素爲<ul>，我想在最左側添加標籤即;第一個選項卡，而不考慮活動選項卡。

Answer 1

以下是您的問題的代碼，它將在左側添加Tab並將選擇新添加的。

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