This is a migrated thread and some comments may be shown as answers.

Tabstrip

2 Answers 86 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Mat-Moo asked on 03 Jan 2013, 04:08 PM

On my project I have 5 tabs at the bottom :-

<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>

<div data-role="footer">
<div id="tabstrip" data-role="tabstrip">
<a href="#tabstrip-setup" id="tab-stage" data-icon="setup">Setup</a>
<a href="#tabstrip-knowledge" id="tab-knoweldge" data-icon="learn">Knowledge</a>
<a href="#tabstrip-merchant" id="tab-merchant" data-icon="stockist">Merchant</a>
<a href="#tabstrip-website" data-icon="www">Website</a>
<a href="index.html" data-rel="external" data-icon="information">About</a>
</div>
</div>
</div>

Quite simply I want to switch tab based on a calling param...

document.addEventListener("deviceready", onDeviceReady, false);

// -----------------------------------------------------------------------------------------------
// PhoneGap is ready
// -----------------------------------------------------------------------------------------------
function onDeviceReady() {
alert($.urlParam('tab'));

// switch tab
$("#tabstrip").data("kendoTabStrip").select(1);

}

but I can't get the select to do anything? Tried lots of calls, and going mad!

Also, I want to change the page that is displayed on the tab, which I am doing by changing the href of the tab itself... however this works the firstt ime, but then any previous attempts to change it fail. You can see this in my Sundial

2 Answers, 1 is accepted

answered on 04 Jan 2013, 01:28 PM

Hi Mat-Moo,

I have prepared a sample for programmatic navigation with parameters.

To run it:

Create a kendo project;
replace the content of index.html with the code bellow:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

</head>

<body>

<div data-role="view" id="tabstrip-one" data-title="Tab1" data-show="onViewShown">

<h1>FirstTab!</h1>

</div>

<div data-role="view" id="tabstrip-two" data-title="Tab2" data-show="onViewShown">

<h1>SecondTab!</h1>

</div>

<div data-role="view" id="tabstrip-three" data-title="Tab3" data-show="onViewShown">

<h1>ThirdTab!</h1>

</div>

<div data-role="layout" data-id="mobile-tabstrip">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

<button data-role="button" id="changeViewsButton">Change</button>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip" id="tabStrip">

<a href="#tabstrip-one?param=0" data-icon="home">Tab1</a>

<a href="#tabstrip-two?param=1" data-icon="share">Tab2</a>

<a href="#tabstrip-three?param=2" data-icon="globe">Tab3</a>

</div>

<script>

var tabStrip, tabCount;

var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });

var shouldSwitch = true;

$(document).on("deviceready", function() {

var jTabStrip = $("#tabStrip");

tabStrip = jTabStrip.data("kendoMobileTabStrip");

tabCount = jTabStrip.children("a").length;

});

$("#changeViewsButton").on("click", function() {

// this function executes the programatic navigation

if (tabStrip) {

if (shouldSwitch) {

var currentIndex = $(tabStrip.element)

.children()

.index(tabStrip.currentItem());

var nextIndex = (currentIndex === (tabCount - 1)) ? 0 : currentIndex + 1;

var urlToNavigate = "#" + $(tabStrip.element).children("a")[nextIndex].href.split("#")[1];

tabStrip.switchTo(urlToNavigate);

app.navigate(urlToNavigate);

// this is a workaround, because

// there is currently a problem

// with a fast navigation

// its reported to the kendo team

shouldSwitch = false;

setTimeout(function() {

shouldSwitch = true;

}, 550);

}

});

function onViewShown(e) {

var view = e.view;

var param = view.params.param;

if (param === undefined) {

param = 0;

}

alert(param);

}

</script>

</body>

</html>

I hope this is helpful.

Regards,

Nikolay Tsenkov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Tabstrip

2 Answers, 1 is accepted