Приложите вкладки слева в Kendo Tab Strip

Question

мы можем добавить вкладки вправо, используя функцию append в полосе вкладок кендо (кнопка с новым щелчком создает вкладку справа от самой последней предыдущей вкладки), например Code here.

Но мне нужно добавить вкладки слева на i.e; Кнопка «Новый клик» создает вкладку слева (в первую очередь).

У нас есть insertbefore функция для создания вкладки справа от активной вкладки, но ей нужно по крайней мере на <li> элемент для <ul>, и я хочу добавить вкладку в самый левый i.e; первая вкладка, независимо от активной вкладки.

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>