Patrick Rioux
Top achievements
Rank 1
Rank 1
Patrick Rioux
asked on 30 May 2012, 01:40 PM
Hi,
How can I set my own text for the tabStrip button on the footer.
This is important for localization. It seems that the build-in data-icon put its own text and need a way to use standard icon but override the text. Thank you.
<div data-role="footer">
<div data-role="tabstrip">
<a href="content/views/doctorsearch.html" id="btnActionSearch" data-icon="search"></a>
<a href="content/views/settings.html" id="btnActionSettings" data-icon="settings"></a>
</div>
</div>
How can I set my own text for the tabStrip button on the footer.
This is important for localization. It seems that the build-in data-icon put its own text and need a way to use standard icon but override the text. Thank you.
<div data-role="footer">
<div data-role="tabstrip">
<a href="content/views/doctorsearch.html" id="btnActionSearch" data-icon="search"></a>
<a href="content/views/settings.html" id="btnActionSettings" data-icon="settings"></a>
</div>
</div>
3 Answers, 1 is accepted
0
Hi,
Petyo
the Telerik team
The icon does not set any text - you can put whatever text is needed inside the A element. See this fiddle for example.
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Patrick Rioux
Top achievements
Rank 1
Rank 1
answered on 30 May 2012, 08:16 PM
Ok the issue was on my end...But when I set the new caption in the data-show the button in the tabstrip became very small.
I need to do this there before when the user on in my setting view, they can change the language. Therefore when doing a back (from my setting view) I need to set the proper caption. This is very strange and I can't figure out. Maybe there is another way to do this? Thanks.
<body onload="onBodyLoad();">
<div data-role="layout" data-id="default" data-show="initHomeView">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="content/views/doctorsearch.html" id="btnActionSearch" data-icon="search"></a>
<a href="content/views/settings.html" id="btnActionSettings" data-icon="settings"></a>
</div>
</div>
</div>
<script>
// Localization
function initHomeView() {
$('#btnActionSearch').text(dtGetText("ActionSearch"));
$('#btnActionSettings').text(dtGetText("ActionSettings"));
}
var app;
app = new kendo.mobile.Application($(document.body), {
transition: "slide",
initial: dtMobileHomeView,
loading: dtGetText("Loading") });
$("#tabStrip").data("kendoTabStrip").bind("activate", initHomeView);
app.navigate(dtMobileHomeView);
</script>
</body>
I need to do this there before when the user on in my setting view, they can change the language. Therefore when doing a back (from my setting view) I need to set the proper caption. This is very strange and I can't figure out. Maybe there is another way to do this? Thanks.
<body onload="onBodyLoad();">
<div data-role="layout" data-id="default" data-show="initHomeView">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="content/views/doctorsearch.html" id="btnActionSearch" data-icon="search"></a>
<a href="content/views/settings.html" id="btnActionSettings" data-icon="settings"></a>
</div>
</div>
</div>
<script>
// Localization
function initHomeView() {
$('#btnActionSearch').text(dtGetText("ActionSearch"));
$('#btnActionSettings').text(dtGetText("ActionSettings"));
}
var app;
app = new kendo.mobile.Application($(document.body), {
transition: "slide",
initial: dtMobileHomeView,
loading: dtGetText("Loading") });
$("#tabStrip").data("kendoTabStrip").bind("activate", initHomeView);
app.navigate(dtMobileHomeView);
</script>
</body>
0
Hello Patrick,
Petyo
the Telerik team
The mobile tabstrip injects some additional HTML structure in the links if an icon is specified. You can examine it through the web inspector for further details. If you want to change the text of the tab, you should modify the text of the SPAN element with class km-text inside the link.
Kind regards,Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!