cordova-plugin-nativepagetransitions
Version:
Slide out the current page to reveal the next one. By a native transitions.
139 lines (121 loc) • 5.39 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<meta name="msapplication-tap-highlight" content="no"/>
<title>Hello World</title>
<style>
button {
font-size: 1.6em;
}
</style>
</head>
<body>
<div class="app">
<h1 id="title">First page</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p><br/>
<button onclick="document.location = 'kendolockdemo/index.html'">KendoUI Lock</button><br/>
<h2>Drawer</h2>
<button onclick="drawer('close', 'left', '#A7A7A7')">close l</button>
<button onclick="drawer('open', 'left', 'green')">open l</button><br/>
<button onclick="drawer('close', 'right', '#A7A7A7')">close r</button>
<button onclick="drawer('open', 'right', 'green')">open r</button><br/>
<h2>Slide</h2>
<button onclick="slide('up', 'lightblue', 1, 'index.html')">up</button><br/><br/>
<!--<button onclick="slide('left', 'red', 1, 'index.html?x=y')">left, file</button> -->
<button onclick="slide('right', 'red', -1, '#grr')">back</button>
<button onclick="slide('left', 'orange', 3, '#sjaak?x=1')">fwd</button><br/><br/>
<button onclick="slide('down', 'green', -1, '#oliebol')">down</button><br/>
<h2>Flip</h2>
<button onclick="flip('up')">up</button><br/><br/>
<button onclick="flip('left', 'red')">left</button>
<button onclick="flip('right', 'green')">right</button><br/><br/>
<button onclick="flip('down')">down</button><br/><br/>
HTML5 fwk slide demo's:<br/>
<button onclick="document.location = 'kendouidemo.html'">KendoUI</button>
<button onclick="document.location = 'jqmdemo.html'">JQM</button>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!--<button onclick="slide(null, 'blue')">default direction</button>-->
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function flip(direction, color, href) {
setTimeout(function () {
// update the page inside this timeout
document.querySelector("#title").innerHTML = direction;
document.querySelector("html").style.background = color;
}, 10);
window.plugins.nativepagetransitions.flip({
'backgroundColor' : "#BBBBBB",
'direction': direction,
'duration': 7000,
'iosdelay': 20,
'href': href
},
function () {
console.log('------------------- flip transition finished');
},
function (msg) {
alert('error: ' + msg);
});
}
// demo for hooking the Android backbutton to the slide 'right'
document.addEventListener('backbutton', function() {
slide('right', 'purple');
}, false);
function slide(direction, color, slowdownfactor, hrf) {
if (!hrf) {
setTimeout(function () {
// update the page inside this timeout
document.querySelector("#title").innerHTML = direction;
document.querySelector("html").style.background = color;
}, 20);
}
// not passing in options makes the plugin fall back to the defaults defined in the JS API
var theOptions = {
'direction': direction,
'duration': 2000,
'slowdownfactor' : slowdownfactor,
'href': hrf,
'fixedPixelsTop' : 40, // optional, the number of pixels of your fixed header, default 0 (iOS and Android)
'fixedPixelsBottom': 0 // optional, the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android)
};
window.plugins.nativepagetransitions.slide(
theOptions,
function () {
console.log('------------------- slide transition finished');
},
function (msg) {
alert('error: ' + msg);
});
}
function drawer(action, origin, color, href) {
// not passing in options makes the plugin fall back to the defaults defined in the JS API
window.plugins.nativepagetransitions.drawer({
'action': action,
'origin': origin,
'duration': 350,
'href': href
},
function () {
console.log('------------------- drawer transition finished');
},
function (msg) {
alert('error: ' + msg);
});
}
function loadJqmDemo() {
document.location = 'jqmdemo.html';
}
</script>
</body>
</html>