You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
4.3 KiB
146 lines
4.3 KiB
<!DOCTYPE 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>
|
|
|