app-UI/samples/02 - splitviewnavigator/01 - basic/index.html

85 lines
3.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="../../../src/libs/jquery-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/splitviewnavigator/splitviewnavigator.css" type="text/css" />
<script src="../../../src/splitviewnavigator/splitviewnavigator.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<script>
$(document).ready( function() {
var sidebarViewDescriptor = getSidebarView();
sidebarViewDescriptor.backLabel = null;
var bodyViewDescriptor = getBodyView();
bodyViewDescriptor.backLabel = null;
//Setup the ViewNavigator
new SplitViewNavigator( 'body', "Menu" );
window.splitViewNavigator.pushSidebarView( sidebarViewDescriptor );
window.splitViewNavigator.pushBodyView( bodyViewDescriptor );
} );
function getSidebarView() {
var viewHTML = "<ul>" +
"<li onclick='pushSidebarView()' class='backLinkButton'>Push Sidebar View</li>" +
"<li onclick='window.splitViewNavigator.popSidebarView()' class='backLinkButton'>Pop Sidebar View</li>" +
"<li onclick='pushBodyView()' class='backLinkButton'>Push Body View</li>" +
"<li onclick='window.splitViewNavigator.popBodyView()' class='backLinkButton'>Pop Body View</li>" +
"</ul>";
return {
title: "Sidebar " + parseInt( Math.random() * 100 ).toString(),
backLabel: "Back",
view: $(viewHTML)
};
}
function getBodyView() {
var viewHTML = "<div>" +getMeat() + "</div>";
return {
title: "Body Content " + parseInt( Math.random() * 100 ).toString(),
backLabel: "Back",
view: $(viewHTML)
};
}
function pushSidebarView() {
window.splitViewNavigator.pushSidebarView( getSidebarView() );
}
function pushBodyView() {
window.splitViewNavigator.pushBodyView( getBodyView() );
window.splitViewNavigator.hideSidebar();
}
function getMeat() {
//randomly generate content
//text string generated by http://baconipsum.com/
var iterations = 1 + parseInt(Math.random() * 25);
var result = "";
for ( var i = 0; i < iterations; i ++ ) {
result += "Pork chop corned beef meatloaf prosciutto flank, chuck andouille fatback hamburger cow ham turkey. Drumstick filet mignon boudin, salami beef ribs ball tip turducken frankfurter chuck. Pork chop swine chuck meatloaf capicola tri-tip. Pork belly venison bresaola flank, jerky ham hock short loin ground round corned beef salami pork filet mignon tri-tip sirloin. Tenderloin meatball corned beef, boudin brisket bresaola rump short loin tri-tip spare ribs pork belly cow.<hr>"
}
return result;
}
</script>
</head>
<body></body>
</html>