tabstrip selected icon issue - mobile views

3 posts, 0 answers
  1. Lee
    Lee avatar
    46 posts
    Member since:
    Feb 2012

    Posted 24 May 2012 Link to this post

    I have two icons within my tabstrip, one for home and one for logout.  When I navigate away from the home page, the home button is still highlighted.  I do not want this highlighted when not on the homepage.  Can anyone suggest what I need to do to fix this?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Control Panel - Mobile</title>
        <!--include Kendo UI files-->
        <link href="public/css/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="public/css/kendo.default.min.css" rel="stylesheet" type="text/css" />
        <link href="public/css/kendo.mobile.all.min.css"  rel="stylesheet" type="text/css" />
        <script src="public/js/jquery.min.js" type="text/javascript"></script>
        <script src="public/js/kendo.mobile.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div data-role="view" data-layout="index_template" data-title="Control Panel - Mobile" id="index">
            <?php if (isset($error)){  echo '<p style="color:red">Error: '. $error .'</p>';} ?>
               
            <ul data-role="listview" data-style="inset">
                <li><a href="/messages/listall">Customer Messages (<span id="unread_messages_hp"><?=$unread_messages?></span>)</a></li>
                <li><a href="/support/listall">Support Messages (<span id="unread_support_hp"><?=$unread_support?></span>)</a></li>
                <li><a href="/reviews/listall">Customer Reviews (<span id="new_reviews_hp"><?=$new_reviews?></span>)</a></li>
                <li><a href="/orders/listall">Orders (<span id="new_orders"><?=$new_orders?></span>)</a></li>      
            </ul>
       </div>
       <div data-id="index_template" data-role="layout" data-show="triggerIndexButton">
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                      
                </div>
            </div>
           
            <div data-role="footer">
                <div data-role="tabstrip" >
                    <a href="/" data-icon="home" data-rel="external">Home</a>
                    <a href="/logout" data-icon="settings">Logout</a>
                </div>
            </div>
       </div>   
       <div data-id="main_template" data-role="layout">
            <div data-role="header">
                <div data-role="navbar">
                    <a class="nav-button" data-align="left" data-role="backbutton" id="back">Back</a>
                    <span data-role="view-title"></span>
                      
                </div>
            </div>
           
            <div data-role="footer">
                <div data-role="tabstrip">
                    <a href="/" data-icon="home" data-rel="external">Home</a>
                    <a href="/settings" data-icon="settings">Logout</a>
                </div>
            </div>
       </div>  
    Many thanks in advance for your help.
  2. Anker Berg-Sonne
    Anker Berg-Sonne avatar
    37 posts
    Member since:
    Sep 2009

    Posted 24 May 2012 Link to this post

    Lee,

    To begin with, I would use a template like in the demo example. I struggled a lot to get my tabstrips working, but I finally got everything to work right.

    Good luck/Anker
  3. Kendo UI is VS 2017 Ready
  4. Patrick
    Patrick avatar
    3 posts
    Member since:
    May 2012

    Posted 31 May 2012 Link to this post

    I'm trying to use the tabstrip more as a command bar so I do the following to change the selected state of the icon press:

    $("#myTabStrip").kendoMobileTabStrip({
         
                                             selectedIndex: 99,
                                             select: function(whichitem) {
                                              
                                             var itemindex = $(whichitem.item).index()
                                              
                                             switch(itemindex)
                                             {
                                             case 0:
                                             break;
                                              
                                             case 1:
                                             altcam(ptid, perma_id);
                                             break;
                                              
                                             case 2:
                                             break;
                                              
                                             case 3:
                                             break;
                                              
                                             }
                                              
                                             this.data().selectedIndex = 99;  //deselect the icon to act like a button
                                              
                                             }
                                              
         
         
        });
Back to Top