jube-fork/Jube.App/wwwroot/kendo/examples/mobile-tabstrip/badges.html

<div data-role="view" id="badges-profile" data-title="Profile" data-layout="mobile-tabstrip" data-show="addTimer" data-hide="removeTimer">
    <img src="content/shared/images/eduardo.jpg" class="km-thumbnail" style="width: 10em; height: 10em; margin: 2em auto; display: block; float: none;">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Profile
            <ul>
                <li>Eduardo Batista</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>
            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>
    </ul>
</div>

<div data-role="view" id="badges-sales" data-title="Mail" data-layout="mobile-tabstrip">
    <ul data-role="listview">
        <li>
            <h6>John Doe 07:56</h6>
            <h4>Monday meeting</h4>
            <p>Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday.</p>
        </li>
        <li>
            <h6>Sarah Connor 08:22</h6>
            <h4>Regarding org chart changes</h4>
            <p>Tom, I checked the new org chart last night and I have some reservations about it...</p>
        </li>
        <li>
            <h6>Jane Parker 10:14</h6>
            <h4>Your Costume is ready</h4>
            <p>Hi mr. Sawyer, I'm sorry for the delay, your Halloween costume is ready. The bears...</p>
        </li>
        <li>
            <h6>Joe Harper 10:14</h6>
            <h4>I'm sorry, Tom</h4>
            <p>Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete...</p>
        </li>
        <li>
            <h6>Becky Thatcher 10:14</h6>
            <h4>Out tonight?</h4>
            <p>Honey, wanna go out tonight to grab some chicken? My weekly vouchers for cooking...</p>
        </li>
    </ul>
</div>

<div data-role="layout" data-id="mobile-tabstrip" data-show="showDemoLayout">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" data-icon="home" href="#/"></a>
            <a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
        </div>
    </header>

    <p>TabStrip</p>

    <div data-role="footer">
        <div data-role="tabstrip" id="badges-tabs">
            <a href="#badges-profile" data-icon="home">Home
            </a><a href="#badges-sales" data-icon="edit" data-badge="10">Mail</a>
        </div>
    </div>
</div>

<script>
    var timer;

    function changeTabBadge() {
        var tabstrip = $("#badges-tabs").data("kendoMobileTabStrip");
        if (!tabstrip) {
            removeTimer();
            return;
        }

        tabstrip.badge("a:last", +tabstrip.badge("a:last") + 5);
    }

    function addTimer() {
        timer = setInterval(changeTabBadge, 1000);
    }

    function removeTimer() {
        clearInterval(timer);
    }
</script>