Post
Ask Question

Implement Tab Strip in Kendo UI

We can implement the tab strip in the Kendo UI using the widget called kendo tabstrip 
 
Step 1
 
Create a HTML page in my case I named it as Tabstrip.html and write the following code in it.
  1. <!DOCTYPE html>  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  6.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  7.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  8.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  9.         <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  10.         <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  11.         <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  12.         <title></title>  
  13.     </head>  
  14.     <body>  
  15.         <div id="example" style="width:400px">  
  16.             <h4>Select a tab</h4>  
  17.             <div data-role="tabstrip"    
  18.                      
  19.                  visible: isVisible">  
  20.                 <ul>  
  21.                     <li>    
  22.                         Tab1    
  23.                     </li>  
  24.                     <li>    
  25.                         Tab2    
  26.                     </li>  
  27.                     <li>    
  28.                         Tab3    
  29.                     </li>  
  30.                     <li>    
  31.                         Tab4    
  32.                     </li>  
  33.                 </ul>  
  34.                 <div>  
  35.                     <span> Content in Tab1</span>  
  36.                 </div>  
  37.                 <div>  
  38.                     <span>Content in tab2</span>  
  39.                 </div>  
  40.                 <div>  
  41.                     <span>Content in tab3</span>  
  42.                 </div>  
  43.                 <div>  
  44.                     <span>Content in tab4</span>  
  45.                 </div>  
  46.             </div>  
  47.         </div>
The data-role property is used to set the widget(tab strip ).
 
Step 2
 
The JavaScript in MVVM Model
  1. var viewModel = kendo.observable({  
  2.        isVisible: true,  
  3.         
  4.    });  
  5.    kendo.bind($("#example"), viewModel);  
 From the above script we are going to enable the Kendo tabstrip 
 
Result in Browser
 
Figure 1: Tab1
 
 
Figure 2: Tab3