Kendo UI Mobile TabStrip do something on tab change(select)
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) - 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">↑ $ 35,000</span></li> <li>February <span class="sales-down">↓ $ 25,000</span></li> <li>March <span class="sales-down">↓ $ 23,000</span></li> <li>April <span class="sales-up">↑ $ 30,000</span></li> <li>May <span class="sales-up">↑ $ 31,000</span></li> <li>June <span class="sales-down">↓ $ 29,000</span></li> <li>July <span class="sales-up">↑ $ 35,000</span></li> <li>August <span class="sales-up">↑ $ 37,000</span></li> <li>September <span class="sales-hold">→ $ 37,000</span></li> <li>October <span class="sales-hold">→ $ 37,000</span></li> <li>November <span class="sales-up">↑ $ 38,000</span></li> <li>December <span class="sales-up">↑ $ 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');
}
Developer | Jordan Ilchev |
Username | jordanilchev |
Uploaded | July 30, 2022 |
Rating | 3 |
Size | 3,003 Kb |
Views | 40,480 |
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!
Name | Size |
Nine-patch checker | 1,997 Kb |
Kendo UI Mobile ListView flat | 1,833 Kb |
Pixel level canvas manipulation with no anti-aliasing | 1,750 Kb |
A Pen by Jordan Ilchev | 1,553 Kb |
Code-generated audio | 1,594 Kb |
Kendo UI Mobile ListView with template | 2,012 Kb |
Kendo UI Mobile ListView Tasks | 1,984 Kb |
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!
Name | Username | Size |
CSS Chat Bubbles | Boylett | 2,094 Kb |
Flex layout example | Mofny | 1,663 Kb |
Mini Profile | Frytyler | 3,828 Kb |
Knob rotation | Alemesre | 2,122 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
Cloud upload | Jaflo | 2,774 Kb |
3D flipping card | Ssaakkaa | 2,238 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!