Kendo UI Mobile TabStrip do something on tab change(select)

Developer
Size
3,003 Kb
Views
40,480

How do I make an kendo ui mobile tabstrip do something on tab change(select)?

What is a kendo ui mobile tabstrip do something on tab change(select)? How do you make a kendo ui mobile tabstrip do something on tab change(select)? This script and codes were developed by Jordan Ilchev on 30 July 2022, Saturday.

Kendo UI Mobile TabStrip do something on tab change(select) Previews

Kendo UI Mobile TabStrip do something on tab change(select) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Kendo UI Mobile TabStrip do something on tab change(select) </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <title></title> <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script src="http://cdn.kendostatic.com/2013.1.319/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
</head>
<body> <div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip"> <ul data-role="listview" data-style="inset" data-type="group"> <li>Profile <ul> <li><h2>Carine <span>Callahan</span></h2><img src="../../content/mobile/overview/carine.jpg" /></li> <li>Weekly average sales <span class="sales-up">$ 8,250</span></li> <li>Monthly average sales <span class="sales-up">$ 32,000</span></li> </ul> </li> <li> Languages <ul> <li>English <span class="value">Native</span></li> <li>Hungarian <span class="value">Advanced</span></li> <li>French <span class="value">Advanced</span></li> <li>Chinese <span class="value">Beginner</span></li> </ul> </li> <li> Sales commodity <ul> <li>Beverages</li> <li>Condiments</li> <li>Confections</li> <li>Diary Products</li> <li>Grains/Cereals</li> <li>Meat/Poultry</li> <li>Produce</li> <li>Seafood</li> </ul> </li> <li> PC Skills <ul> <li>MS Word</li> <li>MS Excel</li> <li>MS Outlook</li> <li>MS PowerPoint</li> <li>MS Project</li> <li>Windows (XP, Vista)</li> <li>Internet</li> <li>SAP - Sales and Marketing Module</li> <li>MS Visual Studio</li> <li>Adobe Acrobat</li> <li>CorelDraw</li> </ul> </li> </ul>
</div>
<div data-role="view" id="tabstrip-sales" data-title="Sales History" data-layout="mobile-tabstrip"> <ul data-role="listview" data-style="inset" data-type="group"> <li> Sales 2011 <ul> <li>January <span class="sales-up">&uarr; $ 35,000</span></li> <li>February <span class="sales-down">&darr; $ 25,000</span></li> <li>March <span class="sales-down">&darr; $ 23,000</span></li> <li>April <span class="sales-up">&uarr; $ 30,000</span></li> <li>May <span class="sales-up">&uarr; $ 31,000</span></li> <li>June <span class="sales-down">&darr; $ 29,000</span></li> <li>July <span class="sales-up">&uarr; $ 35,000</span></li> <li>August <span class="sales-up">&uarr; $ 37,000</span></li> <li>September <span class="sales-hold">&rarr; $ 37,000</span></li> <li>October <span class="sales-hold">&rarr; $ 37,000</span></li> <li>November <span class="sales-up">&uarr; $ 38,000</span></li> <li>December <span class="sales-up">&uarr; $ 40,000</span></li> </ul> </li> </ul>
</div>
<div data-role="view" id="tabstrip-rating" data-title="Rating" data-layout="mobile-tabstrip"> <ul data-role="listview" data-style="inset" data-type="group"> <li> Sales Representatives <ul> <li data-icon="toprated">1. Andrew Fuller</li> <li data-icon="toprated">2. Janet Leverling</li> <li data-icon="toprated" style="background-color: #3589e7; color: #fff;">3. Carine Callahan</li> <li data-icon="toprated">4. Margaret Johnson</li> <li data-icon="toprated">5. Steve Collins</li> <li data-icon="toprated">6. Maria Steward</li> </ul> </li> </ul>
</div>
<div data-role="view" id="tabstrip-settings" data-title="Settings" data-layout="mobile-tabstrip"> <ul data-role="listview" data-style="inset" data-type="group"> <li> Carine Callahan <ul> <li>Notify when online <input type="checkbox" data-role="switch" checked></li> <li>Administrator <input type="checkbox" data-role="switch"></li> <li>Access to stats <input type="checkbox" data-role="switch" checked></li> </ul> </li> </ul>
</div>
<div data-role="layout" data-id="mobile-tabstrip"> <header data-role="header"> <div data-role="navbar"> <!--<a class="nav-button" data-align="left" data-role="backbutton">Back</a>--> <span data-role="view-title"></span> <a data-align="right" data-role="button" class="nav-button" href="#">Index</a> </div> </header> <p>TabStrip</p> <div data-role="footer"> <div data-role="tabstrip" data-select="boo"> <a href="#tabstrip-profile" data-icon="contacts">Profile </a><a href="#tabstrip-sales" data-icon="history">Sales </a><a href="#tabstrip-rating" data-icon="favorites">Rating </a><a href="#tabstrip-settings" data-icon="settings">Settings</a> </div> </div>
</div>
<style scoped> #tabstrip-profile h2 { display: inline-block; font-size: 1.1em; margin: 1.5em 0 0 1em; } #tabstrip-profile h2 span { display: block; clear: both; font-size: 2em; margin: .2em 0 0 0; } #tabstrip-profile img { width: 5em; height: 5em; float: left; margin: 1em; -webkit-box-shadow: 0 1px 3px #333; box-shadow: 0 1px 3px #333; -webkit-border-radius: 8px; border-radius: 8px; } .sales-down, .sales-hold, .sales-up, .value { float: right; } .sales-up { color: green; } .sales-down { color: red; } .sales-hold { color: blue; } .value { color: #bbb; }
</style>
<script> var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Kendo UI Mobile TabStrip do something on tab change(select) - Script Codes JS Codes

// from demo here: http://demos.kendoui.com/mobile/tabstrip/index.html#/
// <div data-role="tabstrip" data-select="boo">
function boo() { alert('boo');
}
Kendo UI Mobile TabStrip do something on tab change(select) - Script Codes
Kendo UI Mobile TabStrip do something on tab change(select) - Script Codes
Home Page Home
Developer Jordan Ilchev
Username jordanilchev
Uploaded July 30, 2022
Rating 3
Size 3,003 Kb
Views 40,480
Do you need developer help for Kendo UI Mobile TabStrip do something on tab change(select)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jordan Ilchev (jordanilchev) Script Codes
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!