How to Use a jQuery TabStrip UI Component in Your Web App
Tab strips are convenient ways to group together related items. Learn how you can use the Kendo UI TabStrip to improve the UI in your apps.
Last time in this series you mastered the Menu. In this episode, you will see how to use the TabStrip to organize your content. A tab strip is a grouping of items that allows the user to switch between views. It shares some similarities to a menu but is functionally different. A menu groups together items that are unrelated. A tab strip, on the other hand, groups together items that are related. For example, on a social networking site, you may have menu links for posts, profile, and settings. On the profile page, you can include a TabStrip with the labels feed, followers, and following. There are two types of tab strips: fixed and scrollable. I will explain both and show you how to use them in your project.
Fixed Kendo UI TabStrip
A fixed TabStrip has all its tabs visible. Fixed tab strips are good to use when you have a small number of views and it's important for the user to see all of the available options. The example above about the profile page of a social site is a good use case for a fixed tab strip. This is what a Kendo UI fixed TabStrip looks like along with the code to create it:
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI Tabstrip Example</title>
<link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default-v2.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<div id="tabstrip">
<ul>
<li>Feed</li>
<li>Followers</li>
<li>Following</li>
</ul>
<div>Content for feed</div>
<div>Content for followers</div>
<div>Content for following</div>
</div>
<script>
$(document).ready(function() {
$('#tabstrip').kendoTabStrip();
});
</script>
</body>
</html>The default functionality transforms the unordered list into a row of items that switches views to the content in the corresponding <div> element. Alternatively, you do not have to write out the HTML for the TabStrip. You can build the TabStrip by configuring the options in the .kendoTabStrip method. In this example, we configure the text for the tab labels and its content:
<div id="tabstrip"></div>
<script>
$(document).ready(function() {
$('#tabstrip').kendoTabStrip({
dataTextField: 'label',
dataContentField: 'content',
dataSource: [
{label: 'Feed', content: 'Content for feed'},
{label: 'Followers', content: 'Content for followers'},
{label: 'Following', content: 'Content for following'}
]
});
});
</script>The first two options, dataTextField and dataContentField, define the keys that will be used in the object. Using a data source to create the TabStrip is useful when you have many tabbed items and you don't want to be concerned with writing the HTML. You can abstract the data of the tabs from its markup.
Scrollable Kendo UI TabStrip
A scrollable TabStrip has an overflow of content that can be viewed by pressing a button to move the tabs to the right or to the left. They are best used when you have many tabs and it's not important they all be shown at once. It is also useful when you have a variable number of tabs and they may be dynamically added and removed to the TabStrip. A PDF viewing app is an example where you might use a scrollable tab strip, where each tab could display the content of a document. In that case, you wouldn't know ahead of time how many tabs will be visible.
By default, a TabStrip is scrollable when the tab labels extend the width of the TabStrip. The following is an example of a scrollable TabStrip. It has been styled with the Material theme included in Kendo UI.
Since scrollable tabs are great when dealing with variable content, it would be helpful if we could add or remove tabs programmatically. This is how to add tabs to the TabStrip:
$(document).ready(function() {
const tabstrip = $('#tabstrip').kendoTabStrip().data('kendoTabStrip');
tabstrip.append([
{text: 'Feed', content: 'Content for feed'},
{text: 'Followers', content: 'Content for followers'},
{text: 'Following', content: 'Content for following'}
]);
});Removing a tab is as simple as calling tabstrip.remove(arg) and passing it an element selector, a jQuery object, or a zero-based item index.
Conclusion
The benefit of organizing your content with the TabStrip is that it allows the user to quickly switch between views. The TabStrip provides a child view within the context of a higher level view, without requiring the user to navigate away from the page. You can further customize your TabStrip by using images for labels, changing the orientation, as well as animating how the content loads.
In the next episode, we will take on the PanelBar. You may know this component as an accordion or a collapse. But what you may not know is the many ways it can be used in your app. As with the Menu and the TabStrip, you will see how to wield this component effectively in your code. Until then, train on.
Try out the TabStrip for Yourself
Want to start taking advantage of the Kendo UI TabStrip, or any of the other 70+ ready-made Kendo UI components, like Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.
Start My Kendo UI Trial
Angular, React, and Vue versions
Looking for UI component to support specific frameworks? Check out the TabStrip For Angular, the TabStrip for React, or the TabStrip for Vue.
Resources
Alberta Williams
Alberta is a software developer and writer from New Orleans. Learn more about Alberta at github.com/albertaw.
Related Posts
Comments
All articles
Topics
Latest Stories
in Your Inbox
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required