TabStrip

The mobile TabStrip widget is used inside a mobile view or layout footer element to display an application-wide group of navigation buttons. The look of the mobile TabStrip changes depending on the user mobile device and operating system.

Getting Started

The Kendo mobile Application will automatically initialize the mobile TabStrip for every element with role data attribute set to tabstrip present in the views/layouts markup. Alternatively, it can be initialized using jQuery plugin syntax in the mobile View/Layout init event handler. The tabstrip element should contain one or more a elements.

Kendo Mobile Application Integration

The tabs of the TabStrip navigate to the mobile application's views. When the mobile application navigates to another view, it updates the TabStrip's currently selected tab, based on the current view's URL.

Initialize Kendo mobile TabStrip based on role data attribute.

<div data-role="tabstrip">
    <a href="#index">Home</a>
    <a href="#featured">Featured</a>
</div>

Tab icons

A tab icon can be set in two ways - either by adding an img element inside the a element, or by setting an icon data attribute to the a element. Kendo mobile TabStrip ships with several ready to use icons:

• 
  about
• 
  action
• 
  add
• 
  bookmarks
• 
  camera
• 
  cart
• 
  compose
• 
  contacts
• 
  delete
• 
  details
• 
  downloads
• 
  fastforward
• 
  favorites
• 
  featured
• 
  globe
• 
  history
• 
  home
• 
  info
• 
  more
• 
  mostrecent
• 
  mostviewed
• 
  organize
• 
  pause
• 
  play
• 
  recents
• 
  refresh
• 
  reply
• 
  rewind
• 
  search
• 
  settings
• 
  share
• 
  sounds
• 
  stop
• 
  toprated
• 
  trash
• 
  volume
• 
  wifi

Additional icons may be added by defining the respective CSS tab class.