mirror of
https://github.com/moparisthebest/app-UI
synced 2024-11-02 00:15:01 -04:00
113 lines
3.6 KiB
HTML
113 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>View Navigator Multiple Instances</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/viewnavigator/viewnavigator.css" type="text/css" />
|
||
|
|
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
|
||
|
|
<script src="../../../src/slidingview/slidingview.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
#sidebar {
|
||
|
|
padding:0px;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#body {
|
||
|
|
padding:0px;
|
||
|
|
overflow:hidden;
|
||
|
|
border-left:1px solid black;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
$(document).ready( function() {
|
||
|
|
|
||
|
|
//Setup the default views
|
||
|
|
var leftView = getView( "left" );
|
||
|
|
leftView.backLabel = null;
|
||
|
|
|
||
|
|
var rightView = getView( "right" );
|
||
|
|
rightView.backLabel = null;
|
||
|
|
|
||
|
|
|
||
|
|
new SlidingView( 'sidebar', 'body' );
|
||
|
|
|
||
|
|
//Setup the ViewNavigator
|
||
|
|
window.leftViewNavigator = new ViewNavigator( '#sidebar' );
|
||
|
|
window.leftViewNavigator.pushView( leftView );
|
||
|
|
|
||
|
|
window.rightViewNavigator = new ViewNavigator( '#body' );
|
||
|
|
window.rightViewNavigator.pushView( rightView );
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
function leftPushView() {
|
||
|
|
//create a view and push it onto the view navigator
|
||
|
|
var view = getView("left");
|
||
|
|
window.leftViewNavigator.pushView( view );
|
||
|
|
}
|
||
|
|
|
||
|
|
function leftPopView() {
|
||
|
|
//pop a view from the view navigator
|
||
|
|
window.leftViewNavigator.popView();
|
||
|
|
}
|
||
|
|
|
||
|
|
function rightPushView() {
|
||
|
|
//create a view and push it onto the view navigator
|
||
|
|
var view = getView("right");
|
||
|
|
window.rightViewNavigator.pushView( view );
|
||
|
|
}
|
||
|
|
|
||
|
|
function rightPopView() {
|
||
|
|
//pop a view from the view navigator
|
||
|
|
window.rightViewNavigator.popView();
|
||
|
|
}
|
||
|
|
|
||
|
|
function getView( side ) {
|
||
|
|
//create a view descriptor with random content
|
||
|
|
var bodyView = $('<div>' + Math.random().toString() + '<hr><li href="#" onclick="'+side+'PushView()" class="backLinkButton">push view</li> <li href="#" onclick="'+side+'PopView()" class="backLinkButton">pop view</li><hr>' + getMeat() + '</div>');
|
||
|
|
var links = bodyView.find('a');
|
||
|
|
|
||
|
|
/*for ( var i=0; i<links.length; i++)
|
||
|
|
{
|
||
|
|
NoClickDelay( links[i] );
|
||
|
|
}*/
|
||
|
|
|
||
|
|
return { title: side + "Default View " + parseInt(Math.random()*1000),
|
||
|
|
backLabel: "Back",
|
||
|
|
view: bodyView
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function getMeat() {
|
||
|
|
//randomly generate content
|
||
|
|
//text string generated by http://baconipsum.com/
|
||
|
|
var iterations = 1 + parseInt(Math.random() * 5);
|
||
|
|
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>
|
||
|
|
<div class="slidingview_wrapper">
|
||
|
|
<div id="sidebar">sidebar here!</div>
|
||
|
|
<div id="body">body here!</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|