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:
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
>
</
div
>
</
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
>