dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
147 lines (135 loc) • 4.43 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Page Turning</title>
<link href="../themes/common/PageTurning.css" rel="stylesheet">
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>
<script type="text/javascript">
require([
"dojo/dom",
"dojo/dom-construct",
"dojo/ready",
"dojox/mobile/pageTurningUtils",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat"
], function(dom, domConstruct, ready, pageTurningUtils){
utils = new pageTurningUtils();
ready(function(){
// Set property values to pageTurningUtils object
utils.init(285, 388, "top", 2);
// Initialize catalog node
utils.initCatalog(dom.byId("catalog"));
});
prev = function(){
utils.turnToPrev();
};
next = function(){
utils.turnToNext();
};
var count = 0;
var createNewPageNode = function(){
count++;
var page = domConstruct.create("div", null);
page.innerHTML = '<div id="newfront' + count + '" class="myPane">'
+ '<h1>New Page' + count + '</h1>'
+ '</div>'
+ '<div id="newback' + count + '"></div>';
return page;
};
add = function(){
var value = dom.byId("input_add").value,
index = value ? value - 0 : -1,
pages = utils.getPages(),
page = createNewPageNode();
if(index >= 0 && index < pages.length){
domConstruct.place(page, pages[index], "before");
}else{
// Place to last
domConstruct.place(page, dom.byId("catalog"));
}
// Initialize a new page
utils.initPage(page);
// Reset catalog
utils.resetCatalog();
};
remove = function(){
var value = dom.byId("input_remove").value,
index = value ? value - 0 : -1,
pages = utils.getPages();
if(index >= 0 && index < pages.length){
domConstruct.destroy(pages[index]);
}
// Reset catalog
utils.resetCatalog();
};
});
</script>
<style type="text/css">
.myPane {
background-image: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFFFFF));
font-family: Times New Roman, Helvetica;
color: black;
}
</style>
</head>
<body style="visibility:hidden;">
<div id="view1" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading">Page Turning</h1>
<table>
<tr><td><input type="button" onclick="add()" value="Add" style="width:50px"></td><td>index: <input id="input_add" style="width:20px;text-align:right" value=""></td></tr>
<tr><td><input type="button" onclick="remove()" value="Remove" style="width:50px"></td><td>index: <input id="input_remove" style="width:20px;text-align:right" value=""></td></tr>
</table>
<div style="margin:5px;">
<button onclick="prev()" style="width:50px">Prev</button>
<button onclick="next()" style="width:50px">Next</button>
</div>
<div id="msgArea" style="margin:10px;">onPageTurned: </div>
<div id="catalog" style="margin:10px;">
<div id="page1">
<img alt="" id="front1" src="images/pic1.jpg"/>
<div id="back1"></div>
</div>
<div id="page2">
<img alt="" id="front2" src="images/pic2.jpg"/>
<div id="back2"></div>
</div>
<div id="page3">
<img alt="" id="front3" src="images/pic3.jpg"/>
<div id="back3"></div>
</div>
<div id="page4">
<img alt="" id="front4" src="images/pic4.jpg"/>
<div id="back4"></div>
</div>
<div id="page5">
<img alt="" id="front5" src="images/pic5.jpg"/>
<div id="back5"></div>
</div>
<div id="page6">
<img alt="" id="front6" src="images/pic6.jpg"/>
<div id="back6"></div>
</div>
<div id="page7">
<img alt="" id="front7" src="images/pic7.jpg"/>
<div id="back7"></div>
</div>
<div id="page8">
<img alt="" id="front8" src="images/pic8.jpg"/>
<div id="back8"></div>
</div>
<div id="page9">
<img alt="" id="front9" src="images/pic9.jpg"/>
<div id="back9"></div>
</div>
<div id="page10">
<img alt="" id="front10" src="images/pic10.jpg"/>
<div id="back10"></div>
</div>
</div>
</div>
</body>
</html>