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?
Many thanks in advance for your help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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> 2 Answers, 1 is accepted
0
Anker Berg-Sonne
Top achievements
Rank 1
Rank 1
answered on 24 May 2012, 02:37 PM
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
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
0
Patrick
Top achievements
Rank 1
Rank 1
answered on 01 Jun 2012, 12:01 AM
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 } });