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

[Solved] How to disable/hide Tabstrip in a view

1 Answer 342 Views

Application

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

Tayger asked on 11 Jun 2018, 06:41 PM

Hello

I'm pretty new to KendoUI Mobile. I would like to create a hybrid mobile app. So far I'm doing good just struggle with something simple:

I would like to show initially a login/register screen (view login) without any pre-defined Tabstrip. After successful login the app should switch to show a Tabstrip connected with 3 other views (start, map, settings).

What is the "official" way to not show the Tabstrip on login view or how to I tell the Tabstrip to be only present on not visible login view?

Below a fully working example of how far I came. Setting the "initial" value to "login" would show the login view WITH the (unwanted) Tabstrip.

view login: represents the view that should NOT show the Tabstrip
-> after successful login switch to show Tabstrip with initiall shown view "start"

<!DOCTYPE html>

<html>

<head>

<title>My App</title>

<link href="http://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="http://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>

</head>

<script>

$(document).ready(function() {

// var app = new kendo.mobile.Application();

var app = new kendo.mobile.Application($(document.body), {

skin: 'flat',

transition:'slide',

initial: "start" // Set to "login" will show the Tabstrip as well

});

</script>

<body>

<div id="login" data-role="view" data-layout="default">Register here</div>

<div id="start" data-role="view" data-layout="default">

<span>hello start!</span>

</div>

<div id="map" data-role="view" data-layout="default">Hello map!</div>

<div id="settings" data-role="view" data-layout="default">Hello settings!</div>

// Tabstrip should now be visible on view "login"

<section data-role="layout" data-id="default">

<header data-role="header">

<div data-role="navbar">My App</div>

</header>

<footer data-role="footer">

<div data-role="tabstrip">

<a href="#start">Start</a>

<a data-icon="globe" href="#map">Map</a>

<a data-icon="settings" href="#settings">Settings</a>

</div>

</footer>

</section>

</body>

</html>

Probably a simple question and I just need to know the official way how to solve this.

Regards

[Solved] How to disable/hide Tabstrip in a view

1 Answer, 1 is accepted