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

I need to clic twice on tabstrip to activate the view [VIDEO]

3 Answers 150 Views

TabStrip (Mobile)

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

Orlando asked on 15 Feb 2014, 07:05 PM

Hi,

I've a little problem. I'm using the TabStrip and i need to clic twice on tabstrip to activate the view or press F5 to refresh the page. I posted a video to see the problem.

http://www.youtube.com/watch?v=z8GkVn8QGB0

please your help.

I posted part of the source:

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>Dashboard</title>

<meta name="author" content="">

<script src="view/theme/js/jquery.min.js"></script>

<script src="view/theme/js/kendo.all.min.js"></script>

<link href="view/theme/css/kendo.common.min.css" rel="stylesheet" />

<link href="view/theme/css/kendo.rtl.min.css" rel="stylesheet">

<link href="view/theme/css/kendo.default.min.css" rel="stylesheet">

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

<link href="view/theme/css/kendo.mobile.exported.css" rel="stylesheet" />

</head>

<body>

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

<header data-role="header">

<div data-role="navbar">

<a class="nav-button" data-align="left" data-role="backbutton">Back</a>

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

<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>

</div>

</header>

</div>

<div data-role="view" id="tabstrip-home" data-title="General" data-layout="mobile-tabstrip">

<div class="head"> </div>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

Overview

<ul>

<li>Total Sales:<span class="sales-up">$15,436</span></li>

<li>Total Sales This Year:<span class="sales-up">$15,436</span></li>

<li>Total Orders:<span class="sales-up">3</span></li>

<li>No. of Customers:<span class="sales-up">1</span></li>

<li>Customers Awaiting Approval:<span class="sales-up">0</span></li>

<li>Reviews Awaiting Approval:<span class="sales-up">0</span></li>

<li>No. of Affiliates:<span class="sales-up">0</span></li>

<li>Affiliates Awaiting Approval:<span class="sales-up">0</span></li>

</ul>

</li>

</ul>

<ul data-role="listview" data-style="inset" data-type="group" class="inboxList">

<li>

Latest 10 Orders

<ul>

<li>

<a data-rel="external" href="product?order_id=3">

<h3 class="time">Orlando Jerez</h3>

<h3>14/02/2014</h3>

<h3>$15,005</h3>

<p>14/02/2014</p>

</a>

</li>

<li>

<a data-rel="external" href="product?order_id=2">

<h3 class="time">Orlando Jerez</h3>

<h3>11/02/2014</h3>

<h3>$106</h3>

<p>11/02/2014</p>

</a>

</li>

<li>

<a data-rel="external" href="product?order_id=1">

<h3 class="time">Orlando Jerez</h3>

<h3>11/02/2014</h3>

<h3>$325.00</h3>

<p>11/02/2014</p>

</a>

</li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="tabstrip-sales" data-title="Profile" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li>

<h2>Sales <span>page</span></h2>

<img src="../../content/mobile/overview/carine.jpg" />

</li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="tabstrip-config" data-title="Profile" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li>

<h2>Config <span>page</span></h2>

<img src="../../content/mobile/overview/carine.jpg" />

</li>

</ul>

</li>

</ul>

</div>

<style>

.inboxList

{

font-size: .8em;

}

.inboxList p,

.inboxList h2,

.inboxList h3

{

margin: 5px 2px;

}

.inboxList p,

.inboxList h3

{

color: #777;

}

.inboxList h3.time

{

color: #369;

float: left;

margin-right: 10px;

}

</style>

<style>

.km-ventas:after,

.km-ventas:before

{

content: "\e09c";

}

.km-total:after,

.km-total:before

{

content: "\e086";

}

</style>

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

<header data-role="header">

<div data-role="navbar">

<a data-align="left" data-role="backbutton" class="nav-button">Back</a>

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

<a data-align="right" data-role="button" class="nav-button" href="#index" data-icon="refresh"></a>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#tabstrip-home" data-icon="recents">General</a>

<a href="#index.php?route=catalog/product&token=5f7d94ff10d1569f07d17e5caba9c82d" data-icon="cart">Catalog</a>

<a href="#tabstrip-sales" data-icon="bookmarks">Sales</a>

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

</div>

<style scoped>

#tabstrip-home .head {

display: block;

margin: 1em;

height: 110px;

background: url(images/logo.jpg) no-repeat center center;

-webkit-background-size: 100% auto;

background-size: 100% auto;

}

.km-ios #tabstrip-home .head {

-webkit-border-radius: 10px;

border-radius: 10px;

}

</style>

<style scoped>

#tabstrip-home h2 {

display: inline-block;

font-size: 1.1em;

margin: 1.5em 0 0 .7em;

}

#tabstrip-home h2 span {

display: block;

clear: both;

font-size: 1.8em;

margin: .1em 0 0 0;

}

#tabstrip-home img {

width: 5em;

height: 5em;

float: left;

margin: 1em;

border: 1px solid rgba(0,0,0,.2);

-webkit-border-radius: 4em;

border-radius: 4em;

}

.sales-down,

.sales-hold,

.sales-up,

.value {

float: right;

}

.sales-up { color: green; }

.sales-down { color: red; }

.sales-hold { color: blue; }

.value { color: #bbb; }

</style>

<script>

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

// platform: "ios", //Platform can be one of "ios", "ios7", "android", "blackberry", "wp", "meego"

skin: "flat",

transition: "slide",

hideAddressBar: true,

serverNavigation: false,

loading: "<h1>Cargando...</h1>"

});

</script>

</body>

</html>

3 Answers, 1 is accepted

Accepted