<!DOCTYPE html>
<
html
>
<
head
>
<
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
>
<
link
rel
=
"stylesheet"
href
=
"src/viewnavigator/viewnavigator.css"
type
=
"text/css"
/>
<
script
src
=
"src/viewnavigator/viewnavigator.js"
>
</
script
>
<
style
>
#leftDiv {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 50%;
overflow: hidden;
}
#rightDiv {
position: absolute;
top: 0px;
bottom: 0px;
left: 50%;
right: 0px;
width: 50%;
border-left: 1px solid red;
overflow: hidden;
}
</
style
>
<
script
>
$(document).ready( function() {
// Setup the default views
var leftView = getView( "left" );
leftView.backLabel = null;
var rightView = getView( "right" );
rightView.backLabel = null;
// Setup the ViewNavigator
window.leftViewNavigator =
new ViewNavigator( '#leftDiv' );
window.leftViewNavigator.pushView(leftView);
window.rightViewNavigator =
new ViewNavigator( '#rightDiv' );
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 =
$('<
h3
>Multiple instance of page view</
h3
>'
+ '<
div
>' + '<
hr
><
li
href
=
"#"
onclick
=
"'+side+'PushView()"
class
=
"viewNavigator_backButton"
>push view</
li
>
<
li
href
=
"#"
onclick
=
"'+side+'PopView()"
class
=
"viewNavigator_backButton"
>pop view</
li
><
hr
>'
+ getPageContent() + '</
div
>');
var links = bodyView.find('a');
return { title: side + "Page View " +
parseInt(Math.random()*1000),
backLabel: "Back",
view: bodyView
};
}
function getPageContent()
{
var result = "";
for ( var i = 0; i <
8
; i ++ )
{
result +=
"Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest Python3)
is being used in web development,
Machine Learning applications, along with
all cutting edge technology in the Software
Industry.Python Programming Language
is very well suited for Beginners,
also for experienced programmers with other
programming languages like C++ and Java.
<hr>"
}
return result;
}
</
script
>
</
head
>
<
body
>
<
div
id
=
"leftDiv"
></
div
>
<
div
id
=
"rightDiv"
></
div
>
</
body
>
</
html
>