or
<
div
data-role
=
"view"
id
=
"loginpage"
data-layout
=
"loginLayout"
>
<
div
id
=
"testpanel"
></
div
>
<
center
><
a
data-click
=
"gotoListPage1"
data-role
=
"button"
id
=
"appBtn"
>1:flip</
a
></
center
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"loginLayout"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
>test</
span
>
</
div
>
</
div
>
</
div
>
<
div
data-role
=
"view"
id
=
"listpage"
data-layout
=
"listLayout"
data-show="testInit">
<
div
class
=
"wrapper"
>
<
div
class
=
"headwrapper"
>
<
div
class
=
"appheader"
>test</
div
>
</
div
>
<
div
id
=
"testcontent"
>
<
div
id
=
"testA"
style
=
"width=100px;height:100px;"
>1111111111111111111111</
div
>
<
div
id
=
"testB"
style
=
"display:none;width=100px;height:100px;"
>2222222222222222222222</
div
>
</
div
>
<
center
><
a
data-click
=
"testButton"
data-role
=
"button"
id
=
"appBtn"
>test</
a
></
center
>
</
div
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"listLayout"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
><
span
data-role
=
"view-title"
>Demo</
span
></
div
>
</
div
>
</
div
>
function
gotoListPage1(){
//MYAPP.app.navigate("#listpage",'slide:left');
var
effect = kendo.fx(
"#body"
).flipHorizontal($(
"#loginpage"
), $(
"#listpage"
)).duration(1000);
effect.play();
kendo.mobile.init(
"#listpage"
);
}
function
testButton(){
kendo.fx(
"#testcontent"
).pageturnVertical($(
"#testA"
), $(
"#testB"
)).play();
}