mirror of
https://github.com/moparisthebest/app-UI
synced 2024-12-21 23:18:52 -05:00
replaced parameter lists by an options object; minor fixes;
replaced parameter list by an options object in viewNavigator and splitNavigator. Also updated examples and replaced spaced by tabs in examples files.
This commit is contained in:
Andre Meyering
parent
9f26e42049
commit
5f95713d87
@ -1,67 +1,67 @@
|
||||
<!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">
|
||||
<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/viewnavigator/viewnavigator.css" type="text/css" />
|
||||
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
|
||||
//Setup the default view
|
||||
var defaultView = getView();
|
||||
defaultView.backLabel = null;
|
||||
|
||||
|
||||
//Setup the ViewNavigator
|
||||
window.viewNavigator = new ViewNavigator( 'body' );
|
||||
window.viewNavigator = new ViewNavigator( 'body' );
|
||||
window.viewNavigator.pushView( defaultView );
|
||||
|
||||
|
||||
|
||||
|
||||
} );
|
||||
|
||||
function pushView() {
|
||||
|
||||
function pushView() {
|
||||
//create a view and push it onto the view navigator
|
||||
var view = getView();
|
||||
window.viewNavigator.pushView( view );
|
||||
}
|
||||
|
||||
function popView() {
|
||||
|
||||
function popView() {
|
||||
//pop a view from the view navigator
|
||||
window.viewNavigator.popView();
|
||||
}
|
||||
|
||||
|
||||
function getView() {
|
||||
//create a view descriptor with random content
|
||||
var bodyView = $('<div>' + Math.random().toString() + '<hr><li href="#" onclick="pushView()" class="viewNavigator_backButton">push view</li> <li href="#" onclick="popView()" class="viewNavigator_backButton">pop view</li><hr>' + getMeat() + '</div>');
|
||||
var links = bodyView.find('a');
|
||||
|
||||
return { title: "Default View " + parseInt(Math.random()*1000),
|
||||
|
||||
return { title: "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() * 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>"
|
||||
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>
|
||||
</html>
|
||||
|
||||
@ -1,42 +1,42 @@
|
||||
<!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">
|
||||
<title>View Navigator Sample</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
|
||||
<script src="phonegap-1.4.1.js"></script>
|
||||
|
||||
<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>
|
||||
<script src="phonegap-1.4.1.js"></script>
|
||||
|
||||
<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/libs/css/activityIndicator.css" type="text/css" />
|
||||
|
||||
<style>
|
||||
|
||||
<link rel="stylesheet" href="../../../src/libs/css/activityIndicator.css" type="text/css" />
|
||||
|
||||
<style>
|
||||
|
||||
* {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
#detail {
|
||||
|
||||
#detail {
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
.moviePoster {
|
||||
float:right;
|
||||
width:120px;
|
||||
height:178px;
|
||||
overflow:hidden;
|
||||
margin:10px;
|
||||
padding:2px;
|
||||
border:1px solid #999999;
|
||||
}
|
||||
|
||||
.listSelected {
|
||||
}
|
||||
|
||||
.moviePoster {
|
||||
float:right;
|
||||
width:120px;
|
||||
height:178px;
|
||||
overflow:hidden;
|
||||
margin:10px;
|
||||
padding:2px;
|
||||
border:1px solid #999999;
|
||||
}
|
||||
|
||||
.listSelected {
|
||||
background-color:#424242;
|
||||
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
|
||||
background-image:-moz-linear-gradient(top, #0069d6, #999da9);
|
||||
@ -44,13 +44,13 @@
|
||||
color: #FFF;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
|
||||
ul,li {
|
||||
padding:0;
|
||||
margin:0;
|
||||
border:0;
|
||||
}
|
||||
|
||||
|
||||
.viewNavigator_content li {
|
||||
padding:0 10px;
|
||||
border-bottom:1px solid #ccc;
|
||||
@ -64,137 +64,137 @@
|
||||
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
|
||||
}
|
||||
|
||||
|
||||
#detail li {
|
||||
|
||||
|
||||
#detail li {
|
||||
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
height:auto;
|
||||
}
|
||||
height:auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
var API_KEY = "erxqmwxj75wdrgwfwgkc9vng";
|
||||
|
||||
var sampleData;
|
||||
|
||||
/* ==================== Controller ==================== */
|
||||
|
||||
var controller = {
|
||||
data : []
|
||||
};
|
||||
|
||||
controller.init = function () {
|
||||
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=25&country=us&apikey=" + API_KEY;
|
||||
console.log( url );
|
||||
|
||||
this.rootView = { title: "Rotten Tomatoes",
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
var API_KEY = "erxqmwxj75wdrgwfwgkc9vng";
|
||||
|
||||
var sampleData;
|
||||
|
||||
/* ==================== Controller ==================== */
|
||||
|
||||
var controller = {
|
||||
data : []
|
||||
};
|
||||
|
||||
controller.init = function () {
|
||||
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=25&country=us&apikey=" + API_KEY;
|
||||
console.log( url );
|
||||
|
||||
this.rootView = { title: "Rotten Tomatoes",
|
||||
backLabel: null,
|
||||
view: $("<div id='rootView'><div class='activityIndicator'></div></div>")
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
dataType: "json",
|
||||
success: function(data, textStatus, jqXHR) {
|
||||
|
||||
controller.rootData = data;
|
||||
controller.renderDefaultView();
|
||||
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
alert("error")
|
||||
|
||||
controller.rootData = data;
|
||||
controller.renderDefaultView();
|
||||
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
alert("error")
|
||||
}
|
||||
});
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
controller.renderDefaultView = function () {
|
||||
this.rootView.view.children().remove();
|
||||
var html = "<ul>";
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
controller.renderDefaultView = function () {
|
||||
this.rootView.view.children().remove();
|
||||
var html = "<ul>";
|
||||
for ( var i = 0; i < controller.rootData.movies.length; i ++ )
|
||||
{
|
||||
var movie = controller.rootData.movies[i];
|
||||
html += "<li id='" + movie.id + "'onclick='controller.renderDetails(\"" + i + "\")'>" + movie.title + "</li>";
|
||||
html += "<li id='" + movie.id + "'onclick='controller.renderDetails(\"" + i + "\")'>" + movie.title + "</li>";
|
||||
}
|
||||
html += "</ul>";
|
||||
this.rootView.view.html( html );
|
||||
setTimeout( function() {
|
||||
window.viewNavigator.refreshScroller();
|
||||
}, 10 );
|
||||
|
||||
|
||||
}
|
||||
|
||||
controller.renderDetails = function (index) {
|
||||
var movie = controller.rootData.movies[index];
|
||||
|
||||
$( "#"+movie.id ).addClass( "listSelected" );
|
||||
|
||||
var html = "<div id='detail'>";
|
||||
html += "<h1>" + movie.title + "</h1>";
|
||||
setTimeout( function() {
|
||||
window.viewNavigator.refreshScroller();
|
||||
}, 10 );
|
||||
|
||||
|
||||
}
|
||||
|
||||
controller.renderDetails = function (index) {
|
||||
var movie = controller.rootData.movies[index];
|
||||
|
||||
$( "#"+movie.id ).addClass( "listSelected" );
|
||||
|
||||
var html = "<div id='detail'>";
|
||||
html += "<h1>" + movie.title + "</h1>";
|
||||
html += "<p><strong>" + movie.mpaa_rating + "</strong>, " + movie.runtime + "min. - (" + movie.year + ")</p>";
|
||||
html += "<img src=\"" + movie.posters.profile + "\" class='moviePoster'>";
|
||||
html += "<p>" + movie.synopsis + "</p>";
|
||||
html += "<h3>Ratings:</h3><p>";
|
||||
html += "<strong>Audience:</strong> " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "<br>"
|
||||
html += "<strong>Critics:</strong> " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "<br>"
|
||||
html += "<strong>Audience:</strong> " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "<br>"
|
||||
html += "<strong>Critics:</strong> " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "<br>"
|
||||
html += "</p>"
|
||||
html += "<h4>What the critics say:</h4><p>" + movie.critics_consensus + "</p>";
|
||||
html += "<h3>Cast:</h3><p><ul>";
|
||||
|
||||
|
||||
for ( var i = 0; i < movie.abridged_cast.length; i ++ )
|
||||
{
|
||||
var actor = movie.abridged_cast[i];
|
||||
html += "<li><strong>" + actor.name + ":</strong> ";
|
||||
|
||||
if ( actor.characters ) {
|
||||
|
||||
if ( actor.characters ) {
|
||||
for ( var j = 0; j < actor.characters.length; j ++ )
|
||||
{
|
||||
if ( j > 0 ) { html += ", " };
|
||||
html += actor.characters[j];
|
||||
}
|
||||
}
|
||||
|
||||
html += "</li>";
|
||||
|
||||
html += "</li>";
|
||||
}
|
||||
|
||||
|
||||
html += "</ul></p>";
|
||||
|
||||
|
||||
html += "</div>";
|
||||
|
||||
var movieId = movie.id;
|
||||
var callback = function() {
|
||||
|
||||
var movieId = movie.id;
|
||||
var callback = function() {
|
||||
controller.rootView.view.find( "#"+movieId ).removeClass( "listSelected" );
|
||||
}
|
||||
|
||||
var viewDescriptor = { title: movie.title,
|
||||
|
||||
var viewDescriptor = { title: movie.title,
|
||||
backLabel: "Home",
|
||||
backCallback: callback,
|
||||
view: $(html)
|
||||
};
|
||||
|
||||
|
||||
window.viewNavigator.pushView( viewDescriptor);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
|
||||
//initialize the application controller
|
||||
controller.init();
|
||||
|
||||
controller.init();
|
||||
|
||||
//Setup the ViewNavigator
|
||||
window.viewNavigator = new ViewNavigator( 'body' );
|
||||
window.viewNavigator = new ViewNavigator( 'body' );
|
||||
window.viewNavigator.pushView( controller.rootView );
|
||||
|
||||
|
||||
|
||||
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
4123
samples/01 - viewnavigator/02 - movie reviews/phonegap-1.4.1.js
Normal file
4123
samples/01 - viewnavigator/02 - movie reviews/phonegap-1.4.1.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,19 +1,19 @@
|
||||
<!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">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
#leftDiv {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
@ -22,7 +22,7 @@
|
||||
width:50%;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
|
||||
#rightDiv {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
@ -38,72 +38,72 @@
|
||||
<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 = new ViewNavigator( '#leftDiv' );
|
||||
window.leftViewNavigator.pushView( leftView );
|
||||
|
||||
window.rightViewNavigator = new ViewNavigator( '#rightDiv' );
|
||||
|
||||
window.rightViewNavigator = new ViewNavigator( '#rightDiv' );
|
||||
window.rightViewNavigator.pushView( rightView );
|
||||
|
||||
|
||||
} );
|
||||
|
||||
function leftPushView() {
|
||||
|
||||
function leftPushView() {
|
||||
//create a view and push it onto the view navigator
|
||||
var view = getView("left");
|
||||
window.leftViewNavigator.pushView( view );
|
||||
}
|
||||
|
||||
function leftPopView() {
|
||||
|
||||
function leftPopView() {
|
||||
//pop a view from the view navigator
|
||||
window.leftViewNavigator.popView();
|
||||
}
|
||||
|
||||
function rightPushView() {
|
||||
|
||||
function rightPushView() {
|
||||
//create a view and push it onto the view navigator
|
||||
var view = getView("right");
|
||||
window.rightViewNavigator.pushView( view );
|
||||
}
|
||||
|
||||
function rightPopView() {
|
||||
|
||||
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="viewNavigator_backButton">push view</li> <li href="#" onclick="'+side+'PopView()" class="viewNavigator_backButton">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),
|
||||
|
||||
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() * 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>"
|
||||
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>
|
||||
@ -111,4 +111,4 @@
|
||||
<div id="leftDiv"></div>
|
||||
<div id="rightDiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,57 +1,57 @@
|
||||
<!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">
|
||||
<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/viewnavigator/viewnavigator.css" type="text/css" />
|
||||
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
|
||||
//Setup the default view
|
||||
var defaultView = getView();
|
||||
defaultView.backLabel = null;
|
||||
|
||||
|
||||
//Setup the ViewNavigator
|
||||
window.viewNavigator = new ViewNavigator( 'body' );
|
||||
window.viewNavigator = new ViewNavigator( 'body' );
|
||||
window.viewNavigator.pushView( defaultView );
|
||||
|
||||
|
||||
|
||||
|
||||
} );
|
||||
|
||||
function pushView() {
|
||||
|
||||
function pushView() {
|
||||
//create a view and push it onto the view navigator
|
||||
var view = getView();
|
||||
window.viewNavigator.pushView( view );
|
||||
}
|
||||
|
||||
function popView() {
|
||||
|
||||
function popView() {
|
||||
//pop a view from the view navigator
|
||||
window.viewNavigator.popView();
|
||||
}
|
||||
|
||||
|
||||
function getView() {
|
||||
//create a view descriptor with random content
|
||||
var bodyView =$('<div id="defaultView"><input type="text" placeholder="Email" /> <br/><textarea type="text" placeholder="Text Area" /> <br/>' +
|
||||
'<select><option value="volvo">Red</option><option value="saab">White</option><option value="mercedes">Blue</option></select></div>');
|
||||
var bodyView =$('<div id="defaultView"><input type="text" placeholder="Email" /> <br/><textarea type="text" placeholder="Text Area" /> <br/>' +
|
||||
'<select><option value="volvo">Red</option><option value="saab">White</option><option value="mercedes">Blue</option></select></div>');
|
||||
var links = bodyView.find('a');
|
||||
|
||||
return { title: "Default View " + parseInt(Math.random()*1000),
|
||||
|
||||
return { title: "Default View " + parseInt(Math.random()*1000),
|
||||
backLabel: "Back",
|
||||
view: bodyView
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<!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">
|
||||
<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 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>
|
||||
|
||||
<style>
|
||||
li {
|
||||
@ -25,22 +25,24 @@
|
||||
<script>
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
|
||||
var sidebarViewDescriptor = getSidebarView();
|
||||
sidebarViewDescriptor.backLabel = null;
|
||||
|
||||
|
||||
var bodyViewDescriptor = getBodyView();
|
||||
bodyViewDescriptor.backLabel = null;
|
||||
|
||||
|
||||
|
||||
|
||||
//Setup the ViewNavigator
|
||||
new SplitViewNavigator( 'body', "Menu" );
|
||||
new SplitViewNavigator( 'body', {
|
||||
toggleButtonLabel: 'Menu'
|
||||
});
|
||||
window.splitViewNavigator.pushSidebarView( sidebarViewDescriptor );
|
||||
window.splitViewNavigator.pushBodyView( bodyViewDescriptor );
|
||||
|
||||
|
||||
} );
|
||||
|
||||
|
||||
|
||||
|
||||
function getSidebarView() {
|
||||
var viewHTML = "<ul>" +
|
||||
"<li onclick='pushSidebarView()' class='viewNavigator_backButton'>Push Sidebar View</li>" +
|
||||
@ -48,44 +50,44 @@
|
||||
"<li onclick='pushBodyView()' class='viewNavigator_backButton'>Push Body View</li>" +
|
||||
"<li onclick='window.splitViewNavigator.popBodyView()' class='viewNavigator_backButton'>Pop Body View</li>" +
|
||||
"</ul>";
|
||||
return {
|
||||
title: "Sidebar " + parseInt( Math.random() * 100 ).toString(),
|
||||
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(),
|
||||
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>"
|
||||
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>
|
||||
</html>
|
||||
|
||||
@ -1,50 +1,50 @@
|
||||
<!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">
|
||||
<title>View Navigator Sample</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
|
||||
<script src="phonegap-1.4.1.js"></script>
|
||||
|
||||
<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>
|
||||
<script src="phonegap-1.4.1.js"></script>
|
||||
|
||||
<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/libs/css/activityIndicator.css" type="text/css" />
|
||||
|
||||
<link rel="stylesheet" href="../../../src/splitviewnavigator/splitviewnavigator.css" type="text/css" />
|
||||
<script src="../../../src/splitviewnavigator/splitviewnavigator.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
<link rel="stylesheet" href="../../../src/libs/css/activityIndicator.css" type="text/css" />
|
||||
|
||||
<link rel="stylesheet" href="../../../src/splitviewnavigator/splitviewnavigator.css" type="text/css" />
|
||||
<script src="../../../src/splitviewnavigator/splitviewnavigator.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
* {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
#detail {
|
||||
|
||||
#detail {
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
#defaultView {
|
||||
text-align:center;
|
||||
padding-top:100px;
|
||||
}
|
||||
|
||||
.moviePoster {
|
||||
float:right;
|
||||
width:120px;
|
||||
height:178px;
|
||||
overflow:hidden;
|
||||
margin:10px;
|
||||
padding:2px;
|
||||
border:1px solid #999999;
|
||||
}
|
||||
|
||||
.listSelected {
|
||||
}
|
||||
|
||||
#defaultView {
|
||||
text-align:center;
|
||||
padding-top:100px;
|
||||
}
|
||||
|
||||
.moviePoster {
|
||||
float:right;
|
||||
width:120px;
|
||||
height:178px;
|
||||
overflow:hidden;
|
||||
margin:10px;
|
||||
padding:2px;
|
||||
border:1px solid #999999;
|
||||
}
|
||||
|
||||
.listSelected {
|
||||
background-color:#424242;
|
||||
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
|
||||
background-image:-moz-linear-gradient(top, #0069d6, #999da9);
|
||||
@ -52,13 +52,13 @@
|
||||
color: #FFF;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
|
||||
ul,li {
|
||||
padding:0;
|
||||
margin:0;
|
||||
border:0;
|
||||
}
|
||||
|
||||
|
||||
.viewNavigator_contentHolder li {
|
||||
padding:0 10px;
|
||||
border-bottom:1px solid #ccc;
|
||||
@ -72,98 +72,98 @@
|
||||
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
|
||||
}
|
||||
|
||||
|
||||
#detail li {
|
||||
|
||||
|
||||
#detail li {
|
||||
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
height:auto;
|
||||
}
|
||||
height:auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
var API_KEY = "erxqmwxj75wdrgwfwgkc9vng";
|
||||
|
||||
var sampleData;
|
||||
|
||||
/* ==================== Controller ==================== */
|
||||
|
||||
var controller = {
|
||||
data : []
|
||||
};
|
||||
|
||||
controller.init = function () {
|
||||
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=25&country=us&apikey=" + API_KEY;
|
||||
console.log( url );
|
||||
|
||||
this.rootView = { title: "Rotten Tomatoes",
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
var API_KEY = "erxqmwxj75wdrgwfwgkc9vng";
|
||||
|
||||
var sampleData;
|
||||
|
||||
/* ==================== Controller ==================== */
|
||||
|
||||
var controller = {
|
||||
data : []
|
||||
};
|
||||
|
||||
controller.init = function () {
|
||||
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=25&country=us&apikey=" + API_KEY;
|
||||
console.log( url );
|
||||
|
||||
this.rootView = { title: "Rotten Tomatoes",
|
||||
backLabel: null,
|
||||
view: $("<div id='rootView'><div class='activityIndicator'></div></div>")
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
dataType: "json",
|
||||
success: function(data, textStatus, jqXHR) {
|
||||
|
||||
controller.rootData = data;
|
||||
controller.renderDefaultView();
|
||||
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
alert("error")
|
||||
|
||||
controller.rootData = data;
|
||||
controller.renderDefaultView();
|
||||
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
alert("error")
|
||||
}
|
||||
});
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
controller.renderDefaultView = function () {
|
||||
this.rootView.view.children().remove();
|
||||
var html = "<ul>";
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
controller.renderDefaultView = function () {
|
||||
this.rootView.view.children().remove();
|
||||
var html = "<ul>";
|
||||
for ( var i = 0; i < controller.rootData.movies.length; i ++ )
|
||||
{
|
||||
var movie = controller.rootData.movies[i];
|
||||
html += "<li id='" + movie.id + "'onclick='controller.renderDetails(\"" + i + "\")'>" + movie.title + "</li>";
|
||||
html += "<li id='" + movie.id + "'onclick='controller.renderDetails(\"" + i + "\")'>" + movie.title + "</li>";
|
||||
}
|
||||
html += "</ul>";
|
||||
this.rootView.view.html( html );
|
||||
setTimeout( function() {
|
||||
window.splitViewNavigator.sidebarViewNavigator.refreshScroller();
|
||||
}, 10 );
|
||||
|
||||
|
||||
}
|
||||
|
||||
controller.renderDetails = function (index) {
|
||||
var movie = controller.rootData.movies[index];
|
||||
|
||||
window.splitViewNavigator.hideSidebar();
|
||||
window.splitViewNavigator.sidebarViewNavigator.content.find( "li" ).each(function(index) {
|
||||
setTimeout( function() {
|
||||
window.splitViewNavigator.sidebarViewNavigator.refreshScroller();
|
||||
}, 10 );
|
||||
|
||||
|
||||
}
|
||||
|
||||
controller.renderDetails = function (index) {
|
||||
var movie = controller.rootData.movies[index];
|
||||
|
||||
window.splitViewNavigator.hideSidebar();
|
||||
window.splitViewNavigator.sidebarViewNavigator.content.find( "li" ).each(function(index) {
|
||||
$(this).removeClass( "listSelected" );
|
||||
});
|
||||
|
||||
$( "#"+movie.id ).addClass( "listSelected" );
|
||||
|
||||
var html = "<div id='detail'>";
|
||||
html += "<h1>" + movie.title + "</h1>";
|
||||
|
||||
$( "#"+movie.id ).addClass( "listSelected" );
|
||||
|
||||
var html = "<div id='detail'>";
|
||||
html += "<h1>" + movie.title + "</h1>";
|
||||
html += "<p><strong>" + movie.mpaa_rating + "</strong>, " + movie.runtime + "min. - (" + movie.year + ")</p>";
|
||||
html += "<img src=\"" + movie.posters.profile + "\" class='moviePoster'>";
|
||||
html += "<p>" + movie.synopsis + "</p>";
|
||||
html += "<h3>Ratings:</h3><p>";
|
||||
html += "<strong>Audience:</strong> " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "<br>"
|
||||
html += "<strong>Critics:</strong> " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "<br>"
|
||||
html += "<strong>Audience:</strong> " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "<br>"
|
||||
html += "<strong>Critics:</strong> " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "<br>"
|
||||
html += "</p>"
|
||||
html += "<h4>What the critics say:</h4><p>" + movie.critics_consensus + "</p>";
|
||||
html += "<h3>Cast:</h3><p><ul>";
|
||||
|
||||
|
||||
for ( var i = 0; i < movie.abridged_cast.length; i ++ )
|
||||
{
|
||||
var actor = movie.abridged_cast[i];
|
||||
html += "<li><strong>" + actor.name + ":</strong> ";
|
||||
|
||||
|
||||
if ( actor.characters ) {
|
||||
for ( var j = 0; j < actor.characters.length; j ++ )
|
||||
{
|
||||
@ -171,41 +171,43 @@
|
||||
html += actor.characters[j];
|
||||
}
|
||||
}
|
||||
|
||||
html += "</li>";
|
||||
|
||||
html += "</li>";
|
||||
}
|
||||
|
||||
|
||||
html += "</ul></p>";
|
||||
|
||||
|
||||
html += "</div>";
|
||||
|
||||
var viewDescriptor = { title: movie.title,
|
||||
|
||||
var viewDescriptor = { title: movie.title,
|
||||
view: $(html)
|
||||
};
|
||||
|
||||
window.splitViewNavigator.replaceBodyView( viewDescriptor );
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
window.splitViewNavigator.replaceBodyView( viewDescriptor );
|
||||
|
||||
}
|
||||
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
controller.init();
|
||||
|
||||
var defaultView = { title: "Rotten Tomatoes",
|
||||
|
||||
controller.init();
|
||||
|
||||
var defaultView = { title: "Rotten Tomatoes",
|
||||
view: $("<div id='defaultView'><img src='assets/tomato.jpeg' /></div>")
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
//Setup the ViewNavigator
|
||||
new SplitViewNavigator( 'body', "Movies" );
|
||||
new SplitViewNavigator( 'body', {
|
||||
toggleButtonLabel: 'Movies'
|
||||
});
|
||||
window.splitViewNavigator.pushSidebarView( controller.rootView );
|
||||
window.splitViewNavigator.pushBodyView( defaultView );
|
||||
|
||||
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Sliding View Sample</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>Sliding View 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>
|
||||
|
||||
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
|
||||
<script src="../../../src/slidingview/slidingview.js"></script>
|
||||
<script src="../../../src/libs/jquery-1.7.1.js"></script>
|
||||
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
|
||||
<script src="../../../src/slidingview/slidingview.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
|
||||
//Setup the ViewNavigator
|
||||
new SlidingView( 'sidebar', 'body' );
|
||||
new SlidingView( 'sidebar', 'body' );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
#sidebar {
|
||||
background-color: red;
|
||||
@ -35,11 +35,11 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="slidingview_wrapper">
|
||||
<div id="sidebar">sidebar here!</div>
|
||||
<div id="body">body here!</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
<!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">
|
||||
<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>
|
||||
<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;
|
||||
@ -32,77 +32,77 @@
|
||||
<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 = new ViewNavigator( '#sidebar' );
|
||||
window.leftViewNavigator.pushView( leftView );
|
||||
|
||||
window.rightViewNavigator = new ViewNavigator( '#body' );
|
||||
|
||||
window.rightViewNavigator = new ViewNavigator( '#body' );
|
||||
window.rightViewNavigator.pushView( rightView );
|
||||
|
||||
|
||||
} );
|
||||
|
||||
function leftPushView() {
|
||||
|
||||
function leftPushView() {
|
||||
//create a view and push it onto the view navigator
|
||||
var view = getView("left");
|
||||
window.leftViewNavigator.pushView( view );
|
||||
}
|
||||
|
||||
function leftPopView() {
|
||||
|
||||
function leftPopView() {
|
||||
//pop a view from the view navigator
|
||||
window.leftViewNavigator.popView();
|
||||
}
|
||||
|
||||
function rightPushView() {
|
||||
|
||||
function rightPushView() {
|
||||
//create a view and push it onto the view navigator
|
||||
var view = getView("right");
|
||||
window.rightViewNavigator.pushView( view );
|
||||
}
|
||||
|
||||
function rightPopView() {
|
||||
|
||||
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="viewNavigator_backButton">push view</li> <li href="#" onclick="'+side+'PopView()" class="viewNavigator_backButton">pop view</li><hr>' + getMeat() + '</div>');
|
||||
var links = bodyView.find('a');
|
||||
|
||||
return { title: side + "Default View " + parseInt(Math.random()*1000),
|
||||
|
||||
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>"
|
||||
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 class="slidingview_wrapper">
|
||||
<div id="sidebar"></div>
|
||||
<div id="body"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,169 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Sliding View Sample</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>Sliding View 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>
|
||||
|
||||
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
|
||||
<script src="../../../src/slidingview/slidingview.js"></script>
|
||||
<script type="text/javascript" src="swipeview.js"></script>
|
||||
<script src="../../../src/libs/jquery-1.7.1.js"></script>
|
||||
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
body {
|
||||
padding:0;
|
||||
margin:0;
|
||||
background:#fff;
|
||||
-webkit-user-select:none;
|
||||
-webkit-text-size-adjust:none;
|
||||
color:#333;
|
||||
font-family:helvetica;
|
||||
font-size:12px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:2em;
|
||||
padding:20px 0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#swipeview {
|
||||
width:100%;
|
||||
min-width:320px;
|
||||
height:150px;
|
||||
background:#ddd;
|
||||
border-top:1px solid #aaa;
|
||||
border-bottom:1px solid #aaa;
|
||||
}
|
||||
|
||||
#nav {
|
||||
position:absolute;
|
||||
z-index:100;
|
||||
top:8px;
|
||||
width:200px;
|
||||
height:20px;
|
||||
left:50%;
|
||||
background:rgba(0,0,0,0.75);
|
||||
padding:0;
|
||||
margin:0 0 0 -100px;
|
||||
-webkit-border-radius:10px;
|
||||
}
|
||||
|
||||
#nav li {
|
||||
display:block;
|
||||
float:left;
|
||||
width:14px;
|
||||
height:14px; line-height:14px;
|
||||
-webkit-border-radius:7px;
|
||||
background:rgba(255,255,255,0.1);
|
||||
overflow:hidden;
|
||||
padding:0;
|
||||
margin:3px 11px 0 0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#nav li#prev {
|
||||
margin-left:5px;
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
#nav li#next {
|
||||
margin-right:0;
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
#nav li.selected {
|
||||
background:rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
#swipeview-slider > div {
|
||||
position:relative;
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-box-pack:center;
|
||||
-webkit-box-align:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#swipeview-slider span {
|
||||
-webkit-box-sizing:border-box;
|
||||
display:block;
|
||||
text-align:center;
|
||||
font-size:1.4em;
|
||||
padding:0 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding:20px;
|
||||
margin:0;
|
||||
font-size:1.4em;
|
||||
}
|
||||
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
|
||||
<script src="../../../src/slidingview/slidingview.js"></script>
|
||||
<script type="text/javascript" src="swipeview.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
body {
|
||||
padding:0;
|
||||
margin:0;
|
||||
background:#fff;
|
||||
-webkit-user-select:none;
|
||||
-webkit-text-size-adjust:none;
|
||||
color:#333;
|
||||
font-family:helvetica;
|
||||
font-size:12px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:2em;
|
||||
padding:20px 0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#swipeview {
|
||||
width:100%;
|
||||
min-width:320px;
|
||||
height:150px;
|
||||
background:#ddd;
|
||||
border-top:1px solid #aaa;
|
||||
border-bottom:1px solid #aaa;
|
||||
}
|
||||
|
||||
#nav {
|
||||
position:absolute;
|
||||
z-index:100;
|
||||
top:8px;
|
||||
width:200px;
|
||||
height:20px;
|
||||
left:50%;
|
||||
background:rgba(0,0,0,0.75);
|
||||
padding:0;
|
||||
margin:0 0 0 -100px;
|
||||
-webkit-border-radius:10px;
|
||||
}
|
||||
|
||||
#nav li {
|
||||
display:block;
|
||||
float:left;
|
||||
width:14px;
|
||||
height:14px; line-height:14px;
|
||||
-webkit-border-radius:7px;
|
||||
background:rgba(255,255,255,0.1);
|
||||
overflow:hidden;
|
||||
padding:0;
|
||||
margin:3px 11px 0 0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#nav li#prev {
|
||||
margin-left:5px;
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
#nav li#next {
|
||||
margin-right:0;
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
#nav li.selected {
|
||||
background:rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
#swipeview-slider > div {
|
||||
position:relative;
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-box-pack:center;
|
||||
-webkit-box-align:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#swipeview-slider span {
|
||||
-webkit-box-sizing:border-box;
|
||||
display:block;
|
||||
text-align:center;
|
||||
font-size:1.4em;
|
||||
padding:0 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding:20px;
|
||||
margin:0;
|
||||
font-size:1.4em;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
|
||||
//Setup the ViewNavigator
|
||||
new SlidingView( 'sidebar', 'body' );
|
||||
|
||||
new SlidingView( 'sidebar', 'body' );
|
||||
|
||||
var carousel,
|
||||
el,
|
||||
i,
|
||||
page,
|
||||
slides = [
|
||||
'<strong>Swipe</strong> to know more >>><br>Or scroll down for <em>Lorem Ipsum</em>',
|
||||
'1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.',
|
||||
'2. A robot must obey the orders given to it by human beings, except where such orders would conflict with the First Law.',
|
||||
'3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Laws.'
|
||||
];
|
||||
|
||||
var target = $('#swipeview').get()[0];
|
||||
carousel = new SwipeView( target, {
|
||||
numberOfPages: slides.length,
|
||||
hastyPageFlip: true
|
||||
});
|
||||
|
||||
// Load initial data
|
||||
for (i=0; i<3; i++) {
|
||||
page = i==0 ? slides.length-1 : i-1;
|
||||
|
||||
el = document.createElement('span');
|
||||
el.innerHTML = slides[page];
|
||||
carousel.masterPages[i].appendChild(el)
|
||||
}
|
||||
|
||||
carousel.onFlip(function () {
|
||||
var el,
|
||||
upcoming,
|
||||
i;
|
||||
|
||||
for (i=0; i<3; i++) {
|
||||
upcoming = carousel.masterPages[i].dataset.upcomingPageIndex;
|
||||
|
||||
if (upcoming != carousel.masterPages[i].dataset.pageIndex) {
|
||||
el = carousel.masterPages[i].querySelector('span');
|
||||
el.innerHTML = slides[upcoming];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
el,
|
||||
i,
|
||||
page,
|
||||
slides = [
|
||||
'<strong>Swipe</strong> to know more >>><br>Or scroll down for <em>Lorem Ipsum</em>',
|
||||
'1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.',
|
||||
'2. A robot must obey the orders given to it by human beings, except where such orders would conflict with the First Law.',
|
||||
'3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Laws.'
|
||||
];
|
||||
|
||||
var target = $('#swipeview').get()[0];
|
||||
carousel = new SwipeView( target, {
|
||||
numberOfPages: slides.length,
|
||||
hastyPageFlip: true
|
||||
});
|
||||
|
||||
// Load initial data
|
||||
for (i=0; i<3; i++) {
|
||||
page = i==0 ? slides.length-1 : i-1;
|
||||
|
||||
el = document.createElement('span');
|
||||
el.innerHTML = slides[page];
|
||||
carousel.masterPages[i].appendChild(el)
|
||||
}
|
||||
|
||||
carousel.onFlip(function () {
|
||||
var el,
|
||||
upcoming,
|
||||
i;
|
||||
|
||||
for (i=0; i<3; i++) {
|
||||
upcoming = carousel.masterPages[i].dataset.upcomingPageIndex;
|
||||
|
||||
if (upcoming != carousel.masterPages[i].dataset.pageIndex) {
|
||||
el = carousel.masterPages[i].querySelector('span');
|
||||
el.innerHTML = slides[upcoming];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
} );
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
#sidebar {
|
||||
background-color: red;
|
||||
@ -177,30 +177,30 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="slidingview_wrapper">
|
||||
<div id="sidebar">sidebar here!</div>
|
||||
<div id="body">
|
||||
<h1>Three Laws of Robotics</h1>
|
||||
<div id="swipeview"></div>
|
||||
|
||||
<p>The Three Laws of Robotics (often shortened to The Three Laws or Three Laws) are a set of rules devised by the science fiction author Isaac Asimov and later added to. The rules are introduced in his 1942 short story "Runaround", although they were foreshadowed in a few earlier stories.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<h1>Three Laws of Robotics</h1>
|
||||
<div id="swipeview"></div>
|
||||
|
||||
<p>The Three Laws of Robotics (often shortened to The Three Laws or Three Laws) are a set of rules devised by the science fiction author Isaac Asimov and later added to. The rules are introduced in his 1942 short story "Runaround", although they were foreshadowed in a few earlier stories.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -4,7 +4,7 @@ body {
|
||||
margin:0;
|
||||
background:#fff;
|
||||
-webkit-user-select:none;
|
||||
-webkit-text-size-adjust:none;
|
||||
-webkit-text-size-adjust:none;
|
||||
color:#333;
|
||||
font-family:helvetica;
|
||||
font-size:12px;
|
||||
|
||||
@ -1,106 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/html">
|
||||
<head>
|
||||
<title>Sliding View Sample</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>Sliding View 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>
|
||||
|
||||
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
|
||||
<script src="../../../src/slidingview/slidingview.js"></script>
|
||||
<script src="../../../src/libs/oriDomi.js"></script>
|
||||
<script src="../../../src/libs/jquery-1.7.1.js"></script>
|
||||
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
|
||||
<script src="../../../src/slidingview/slidingview.js"></script>
|
||||
<script src="../../../src/libs/oriDomi.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var sv;
|
||||
|
||||
var sv;
|
||||
$(document).ready( function() {
|
||||
|
||||
|
||||
//Setup the ViewNavigator
|
||||
sv = new SlidingView( 'sidebar', 'body' );
|
||||
sv = new SlidingView( 'sidebar', 'body' );
|
||||
sv.sidebarWidth = 420;
|
||||
sv.sidebar.oriDomi({ hPanels: 1, vPanels: 2, speed:1, perspective:800, shadingIntensity:4 });
|
||||
sv.sidebar.oriDomi( 'accordion', 90 );
|
||||
sv.sidebar.bind( "slidingViewProgress", function(event, data) {
|
||||
|
||||
var fudge = 1
|
||||
var half = data.max/2;
|
||||
if ( data.current < half ) {
|
||||
fudge = (data.current)/half
|
||||
} else if ( data.current > half ) {
|
||||
fudge = (half-(data.current-half))/half
|
||||
}
|
||||
fudge *= 15
|
||||
|
||||
var angle = 90-((90*(data.current/data.max)));
|
||||
//console.log( (angle+fudge) );
|
||||
|
||||
if ( (angle+fudge) > 0 ) {
|
||||
|
||||
sv.sidebar.oriDomi( 'restoreOriDomi' );
|
||||
sv.sidebar.oriDomi( 'accordion', (angle+fudge) );
|
||||
}
|
||||
else {
|
||||
sv.sidebar.oriDomi( 'restoreDOM' );
|
||||
}
|
||||
|
||||
var fudge = 1
|
||||
var half = data.max/2;
|
||||
if ( data.current < half ) {
|
||||
fudge = (data.current)/half
|
||||
} else if ( data.current > half ) {
|
||||
fudge = (half-(data.current-half))/half
|
||||
}
|
||||
fudge *= 15
|
||||
|
||||
var angle = 90-((90*(data.current/data.max)));
|
||||
//console.log( (angle+fudge) );
|
||||
|
||||
if ( (angle+fudge) > 0 ) {
|
||||
|
||||
sv.sidebar.oriDomi( 'restoreOriDomi' );
|
||||
sv.sidebar.oriDomi( 'accordion', (angle+fudge) );
|
||||
}
|
||||
else {
|
||||
sv.sidebar.oriDomi( 'restoreDOM' );
|
||||
}
|
||||
});
|
||||
} );
|
||||
|
||||
|
||||
function sidebarClick() {
|
||||
var color = '#' + parseInt(Math.random()*0xFFFFFF).toString(16);
|
||||
console.log(color);
|
||||
$('#sidebar').css('color', color );
|
||||
var color = '#' + parseInt(Math.random()*0xFFFFFF).toString(16);
|
||||
console.log(color);
|
||||
$('#sidebar').css('color', color );
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
background: #ccc;
|
||||
}
|
||||
body {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width:400px;
|
||||
height:100%;
|
||||
padding:10px;
|
||||
background-image:url('https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTqUiE7E5eQ8bhHensKUtTt2hzd61ogIcYppKKYHfCIE1Gr_rMv6g');
|
||||
background-color: red;
|
||||
padding:10px;
|
||||
font-size:36pt;
|
||||
}
|
||||
#sidebar {
|
||||
width:400px;
|
||||
height:100%;
|
||||
padding:10px;
|
||||
background-image:url('https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTqUiE7E5eQ8bhHensKUtTt2hzd61ogIcYppKKYHfCIE1Gr_rMv6g');
|
||||
background-color: red;
|
||||
padding:10px;
|
||||
font-size:36pt;
|
||||
}
|
||||
|
||||
#body {
|
||||
background-color: #555;
|
||||
padding:10px;
|
||||
text-align:center;
|
||||
background-image: url('https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcS_aG-7AMK8jYO8eHxkCVqpBHmZnGsNzCBB873ee-wiJYQ75yUcZA');
|
||||
text-align:center;
|
||||
background-image: url('https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcS_aG-7AMK8jYO8eHxkCVqpBHmZnGsNzCBB873ee-wiJYQ75yUcZA');
|
||||
}
|
||||
|
||||
a{
|
||||
color:white;
|
||||
}
|
||||
a{
|
||||
color:white;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="slidingview_wrapper">
|
||||
<div id="sidebar">
|
||||
<button ontouchstart="sidebarClick()">Tap To Change Text Color</button>
|
||||
<hr/>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, lorem nec vestibulum placerat, turpis nunc porttitor urna, non consectetur mauris eros vitae urna. Vestibulum at augue nisi. Suspendisse lobortis, libero vel adipiscing egestas, quam mi rhoncus justo, id imperdiet ligula nibh porta massa.
|
||||
|
||||
</div>
|
||||
<div id="body">
|
||||
<h1 style="color:white; font-size:50pt;">Swipe horizontally to reveal the sidebar</h1>
|
||||
<p style="color:white;">Created with <a href="http://oridomi.com/">http://oridomi.com/</a>, works on iOS devices.</p>
|
||||
<button ontouchstart="sidebarClick()">Tap To Change Text Color</button>
|
||||
<hr/>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, lorem nec vestibulum placerat, turpis nunc porttitor urna, non consectetur mauris eros vitae urna. Vestibulum at augue nisi. Suspendisse lobortis, libero vel adipiscing egestas, quam mi rhoncus justo, id imperdiet ligula nibh porta massa.
|
||||
|
||||
<img src="http://incubator.apache.org/cordova/images/cordova_256.png" />
|
||||
</div>
|
||||
<div id="body">
|
||||
<h1 style="color:white; font-size:50pt;">Swipe horizontally to reveal the sidebar</h1>
|
||||
<p style="color:white;">Created with <a href="http://oridomi.com/">http://oridomi.com/</a>, works on iOS devices.</p>
|
||||
|
||||
<img src="http://incubator.apache.org/cordova/images/cordova_256.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,163 +1,163 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Sliding View Sample</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>Sliding View 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/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>
|
||||
<script src="../../../src/libs/oriDomi.js"></script>
|
||||
<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>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
padding:0px;
|
||||
overflow:hidden;
|
||||
border-left:1px solid black;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width:420px;
|
||||
padding:0px;
|
||||
overflow:hidden;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#sidebar .viewNavigator_header {
|
||||
<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>
|
||||
<script src="../../../src/libs/oriDomi.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
padding:0px;
|
||||
overflow:hidden;
|
||||
border-left:1px solid black;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width:420px;
|
||||
padding:0px;
|
||||
overflow:hidden;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#sidebar .viewNavigator_header {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
|
||||
#sidebar .viewNavigator_contentHolder,
|
||||
#sidebar .viewNavigator_content {
|
||||
background: #bbb;
|
||||
background: #bbb;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
var sv;
|
||||
|
||||
var sv;
|
||||
$(document).ready( function() {
|
||||
|
||||
|
||||
//Setup the ViewNavigator
|
||||
//Setup the default views
|
||||
var leftView = getView( "left" );
|
||||
leftView.backLabel = null;
|
||||
|
||||
|
||||
var rightView = getView( "right" );
|
||||
rightView.backLabel = null;
|
||||
|
||||
|
||||
|
||||
|
||||
sv = new SlidingView( 'sidebar', 'body' );
|
||||
|
||||
|
||||
//Setup the ViewNavigator
|
||||
window.leftViewNavigator = new ViewNavigator( '#sidebar' );
|
||||
window.leftViewNavigator = new ViewNavigator( '#sidebar' );
|
||||
window.leftViewNavigator.pushView( leftView );
|
||||
|
||||
window.rightViewNavigator = new ViewNavigator( '#body' );
|
||||
|
||||
window.rightViewNavigator = new ViewNavigator( '#body' );
|
||||
window.rightViewNavigator.pushView( rightView );
|
||||
|
||||
|
||||
//setup oridomi
|
||||
sv.sidebarWidth = 420;
|
||||
sv.sidebar.oriDomi({ hPanels: 1, vPanels: 2, speed:1, perspective:800, shadingIntensity:4 });
|
||||
sv.sidebar.oriDomi( 'accordion', 90 );
|
||||
sv.sidebar.bind( "slidingViewProgress", function(event, data) {
|
||||
|
||||
var fudge = 1
|
||||
var half = data.max/2;
|
||||
if ( data.current < half ) {
|
||||
fudge = (data.current)/half
|
||||
} else if ( data.current > half ) {
|
||||
fudge = (half-(data.current-half))/half
|
||||
}
|
||||
fudge *= 15
|
||||
|
||||
var angle = 90-((90*(data.current/data.max)));
|
||||
//console.log( (angle+fudge) );
|
||||
|
||||
if ( (angle+fudge) > 0 ) {
|
||||
|
||||
sv.sidebar.oriDomi( 'restoreOriDomi' );
|
||||
sv.sidebar.oriDomi( 'accordion', (angle+fudge) );
|
||||
}
|
||||
else {
|
||||
sv.sidebar.oriDomi( 'restoreDOM' );
|
||||
}
|
||||
|
||||
var fudge = 1
|
||||
var half = data.max/2;
|
||||
if ( data.current < half ) {
|
||||
fudge = (data.current)/half
|
||||
} else if ( data.current > half ) {
|
||||
fudge = (half-(data.current-half))/half
|
||||
}
|
||||
fudge *= 15
|
||||
|
||||
var angle = 90-((90*(data.current/data.max)));
|
||||
//console.log( (angle+fudge) );
|
||||
|
||||
if ( (angle+fudge) > 0 ) {
|
||||
|
||||
sv.sidebar.oriDomi( 'restoreOriDomi' );
|
||||
sv.sidebar.oriDomi( 'accordion', (angle+fudge) );
|
||||
}
|
||||
else {
|
||||
sv.sidebar.oriDomi( 'restoreDOM' );
|
||||
}
|
||||
});
|
||||
} );
|
||||
|
||||
|
||||
function sidebarClick() {
|
||||
var color = '#' + parseInt(Math.random()*0xFFFFFF).toString(16);
|
||||
console.log(color);
|
||||
$('#sidebar').css('color', color );
|
||||
var color = '#' + parseInt(Math.random()*0xFFFFFF).toString(16);
|
||||
console.log(color);
|
||||
$('#sidebar').css('color', color );
|
||||
}
|
||||
|
||||
|
||||
function leftPushView() {
|
||||
|
||||
|
||||
function leftPushView() {
|
||||
//create a view and push it onto the view navigator
|
||||
var view = getView("left");
|
||||
window.leftViewNavigator.pushView( view );
|
||||
}
|
||||
|
||||
function leftPopView() {
|
||||
|
||||
function leftPopView() {
|
||||
//pop a view from the view navigator
|
||||
window.leftViewNavigator.popView();
|
||||
}
|
||||
|
||||
function rightPushView() {
|
||||
|
||||
function rightPushView() {
|
||||
//create a view and push it onto the view navigator
|
||||
var view = getView("right");
|
||||
window.rightViewNavigator.pushView( view );
|
||||
}
|
||||
|
||||
function rightPopView() {
|
||||
|
||||
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="viewNavigator_backButton">push view</li> <li href="#" onclick="'+side+'PopView()" class="viewNavigator_backButton">pop view</li><hr>' + getMeat() + '</div>');
|
||||
var links = bodyView.find('a');
|
||||
|
||||
return { title: side + "Default View " + parseInt(Math.random()*1000),
|
||||
|
||||
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>"
|
||||
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"></div>
|
||||
<div id="body"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,73 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>TV Listings</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>TV Listings</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>
|
||||
<script type="text/javascript" src="libs/jquery.address-1.4.js"></script>
|
||||
<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>
|
||||
<script type="text/javascript" src="libs/jquery.address-1.4.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../src/viewnavigator/viewnavigator.css" type="text/css" />
|
||||
<script src="../../src/viewnavigator/viewnavigator.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
body,ul,li,header,nav,aside,section,article,p,a {
|
||||
<link rel="stylesheet" href="../../src/viewnavigator/viewnavigator.css" type="text/css" />
|
||||
<script src="../../src/viewnavigator/viewnavigator.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
body,ul,li,header,nav,aside,section,article,p,a {
|
||||
padding:0;
|
||||
margin:0;
|
||||
border:0;
|
||||
}
|
||||
|
||||
body {
|
||||
font: normal 1.25em Helvetica;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
object{
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#iframeWrapper {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
min-height:100%;
|
||||
background-color: rgba(0,0,0,0);
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
font: normal 1.25em Helvetica;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
object{
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#iframeWrapper {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
min-height:100%;
|
||||
background-color: rgba(0,0,0,0);
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
||||
.viewNavigator_header {
|
||||
background-color: #333;
|
||||
background: url("./assets/header_bg_wood.png") repeat;
|
||||
font: bold 1em Helvetica;
|
||||
}
|
||||
|
||||
|
||||
.viewNavigator_content {
|
||||
border-top: 2px solid #666;
|
||||
background-color: #333;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
|
||||
.viewNavigator_contentHolder {
|
||||
background-color: #333;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
|
||||
.viewNavigator_header_title {
|
||||
max-width:100%;
|
||||
text-shadow: 1px 2px #777;
|
||||
}
|
||||
|
||||
|
||||
.headerButton {
|
||||
-webkit-box-shadow:inset 0px 1px 0px 0px #999;
|
||||
box-shadow:inset 0px 1px 0px 0px #999;
|
||||
@ -105,104 +105,106 @@
|
||||
display:block;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
|
||||
.oddRow {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.listSelected {
|
||||
background:#015FE6;
|
||||
background-color:#015FE6;
|
||||
color: #FFF;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// jQuery Address Event handlers
|
||||
$.address.externalChange(function(event) {
|
||||
var text = event.value.substr(1);
|
||||
|
||||
if ( text.length > 0 ) {
|
||||
loadView( text );
|
||||
window.defaultView.find("a").each(function(i){
|
||||
// jQuery Address Event handlers
|
||||
$.address.externalChange(function(event) {
|
||||
var text = event.value.substr(1);
|
||||
|
||||
if ( text.length > 0 ) {
|
||||
loadView( text );
|
||||
window.defaultView.find("a").each(function(i){
|
||||
var $this = $(this);
|
||||
if ($this.text() == text ) {
|
||||
$this.addClass( "listSelected" );
|
||||
}
|
||||
});
|
||||
$(this).addClass( "listSelected" );
|
||||
}
|
||||
else {
|
||||
$(this).addClass( "listSelected" );
|
||||
}
|
||||
else {
|
||||
resetList();
|
||||
window.viewNavigator.popView();
|
||||
window.viewNavigator.popView();
|
||||
$.address.value("");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
|
||||
//Setup the default view
|
||||
var template = $("#defaultViewTemplate").html();
|
||||
window.defaultView = $(template);
|
||||
|
||||
defaultViewDescriptor = { title: "TV Listings",
|
||||
|
||||
defaultViewDescriptor = { title: "TV Listings",
|
||||
view: window.defaultView
|
||||
};
|
||||
|
||||
|
||||
//Setup the ViewNavigator
|
||||
window.viewNavigator = new ViewNavigator( 'body', 'headerButton' );
|
||||
window.viewNavigator = new ViewNavigator( 'body', {
|
||||
backLinkCSS: 'headerButton'
|
||||
});
|
||||
window.viewNavigator.pushView( defaultViewDescriptor );
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
function loadView( title ) {
|
||||
|
||||
var html = "<div style='min-height:100%; background:#FFF; padding: 3px 15px;'><h1>" + title + "</h1><strong>Cable television</strong> is a system of providing television programs to consumers via radio frequency (RF) signals transmitted to televisions through coaxial cables or digital light pulses through fixed optical fibers located on the subscriber's property. This can be compared to over-the-air method used in traditional broadcast television (via radio waves) in which a television antenna is required. FM radio programming, high-speed Internet, telephony, and similar non-television services may also be provided through cable television. Source: <a href='http://en.wikipedia.org/wiki/Cable_tv'>http://en.wikipedia.org/wiki/Cable_tv</a></div>";
|
||||
|
||||
var iframeView = { title: title,
|
||||
backLabel: "Home",
|
||||
view: $(html),
|
||||
backCallback: handleNavigateBack
|
||||
};
|
||||
|
||||
var html = "<div style='min-height:100%; background:#FFF; padding: 3px 15px;'><h1>" + title + "</h1><strong>Cable television</strong> is a system of providing television programs to consumers via radio frequency (RF) signals transmitted to televisions through coaxial cables or digital light pulses through fixed optical fibers located on the subscriber's property. This can be compared to over-the-air method used in traditional broadcast television (via radio waves) in which a television antenna is required. FM radio programming, high-speed Internet, telephony, and similar non-television services may also be provided through cable television. Source: <a href='http://en.wikipedia.org/wiki/Cable_tv'>http://en.wikipedia.org/wiki/Cable_tv</a></div>";
|
||||
|
||||
var iframeView = { title: title,
|
||||
backLabel: "Home",
|
||||
view: $(html),
|
||||
backCallback: handleNavigateBack
|
||||
};
|
||||
window.viewNavigator.pushView( iframeView );
|
||||
}
|
||||
|
||||
function handleNavigateBack() {
|
||||
|
||||
function handleNavigateBack() {
|
||||
resetList();
|
||||
history.back();
|
||||
}
|
||||
|
||||
function resetList() {
|
||||
|
||||
function resetList() {
|
||||
window.defaultView.find("a").each(function(i){
|
||||
$(this).removeClass( "listSelected" );
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body></body>
|
||||
|
||||
|
||||
<script type="text/html" id="defaultViewTemplate">
|
||||
<ul>
|
||||
<a class="listItem" href="#CBS">CBS</a>
|
||||
<a class="listItem oddRow" href="#NBC">NBC</a>
|
||||
<a class="listItem" href="#FOX">FOX</a>
|
||||
<a class="listItem oddRow" href="#ABC">ABC</a>
|
||||
<a class="listItem" href="#TLC">TLC</a>
|
||||
<a class="listItem oddRow" href="#CNN">CNN</a>
|
||||
<a class="listItem" href="#Food Network">Food Network</a>
|
||||
<a class="listItem oddRow" href="#ESPN">ESPN</a>
|
||||
<a class="listItem" href="#TBS">TBS</a>
|
||||
<a class="listItem oddRow" href="#USA">USA</a>
|
||||
<a class="listItem" href="#MTV">MTV</a>
|
||||
|
||||
<a class="listItem" href="#CBS">CBS</a>
|
||||
<a class="listItem oddRow" href="#NBC">NBC</a>
|
||||
<a class="listItem" href="#FOX">FOX</a>
|
||||
<a class="listItem oddRow" href="#ABC">ABC</a>
|
||||
<a class="listItem" href="#TLC">TLC</a>
|
||||
<a class="listItem oddRow" href="#CNN">CNN</a>
|
||||
<a class="listItem" href="#Food Network">Food Network</a>
|
||||
<a class="listItem oddRow" href="#ESPN">ESPN</a>
|
||||
<a class="listItem" href="#TBS">TBS</a>
|
||||
<a class="listItem oddRow" href="#USA">USA</a>
|
||||
<a class="listItem" href="#MTV">MTV</a>
|
||||
|
||||
</ul>
|
||||
</script>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,233 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>View Navigator Sample</title>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
<title>View Navigator Sample</title>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
|
||||
<script src="phonegap-1.4.1.js"></script>
|
||||
|
||||
<script src="libs/jquery-1.7.1.js"></script>
|
||||
<script src="libs/jquery.animate-enhanced.js"></script>
|
||||
<script src="libs/iscroll.js"></script>
|
||||
<script src="libs/noClickDelay.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="viewnavigator/viewnavigator.css" type="text/css" />
|
||||
<script src="viewnavigator/viewnavigator.js"></script>
|
||||
<script src="phonegap-1.4.1.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="libs/css/activityIndicator.css" type="text/css" />
|
||||
|
||||
<link rel="stylesheet" href="splitviewnavigator/splitviewnavigator.css" type="text/css" />
|
||||
<script src="splitviewnavigator/splitviewnavigator.js"></script>
|
||||
<script src="libs/jquery-1.7.1.js"></script>
|
||||
<script src="libs/jquery.animate-enhanced.js"></script>
|
||||
<script src="libs/iscroll.js"></script>
|
||||
<script src="libs/noClickDelay.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
* {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
#detail {
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
#defaultView {
|
||||
text-align:center;
|
||||
padding-top:100px;
|
||||
}
|
||||
|
||||
.moviePoster {
|
||||
float:right;
|
||||
width:120px;
|
||||
height:178px;
|
||||
overflow:hidden;
|
||||
margin:10px;
|
||||
padding:2px;
|
||||
border:1px solid #999999;
|
||||
}
|
||||
|
||||
.listSelected {
|
||||
background-color:#424242;
|
||||
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
|
||||
background-image:-moz-linear-gradient(top, #0069d6, #999da9);
|
||||
background-image:-o-linear-gradient(top, #0069d6, #999da9);
|
||||
color: #FFF;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
ul,li {
|
||||
padding:0;
|
||||
margin:0;
|
||||
border:0;
|
||||
}
|
||||
|
||||
.viewNavigator_contentHolder li {
|
||||
padding:0 10px;
|
||||
border-bottom:1px solid #ccc;
|
||||
height:40px; line-height:40px;
|
||||
font-weight:normal;
|
||||
cursor:pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
|
||||
}
|
||||
|
||||
|
||||
#detail li {
|
||||
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
var API_KEY = "put your rotten tomatoes API key here";
|
||||
|
||||
var sampleData;
|
||||
|
||||
/* ==================== Controller ==================== */
|
||||
|
||||
var controller = {
|
||||
data : []
|
||||
};
|
||||
|
||||
controller.init = function () {
|
||||
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=25&country=us&apikey=" + API_KEY;
|
||||
console.log( url );
|
||||
|
||||
this.rootView = { title: "Rotten Tomatoes",
|
||||
backLabel: null,
|
||||
view: $("<div id='rootView'><div class='activityIndicator'></div></div>")
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
dataType: "json",
|
||||
success: function(data, textStatus, jqXHR) {
|
||||
|
||||
controller.rootData = data;
|
||||
controller.renderDefaultView();
|
||||
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
alert("error")
|
||||
}
|
||||
});
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
controller.renderDefaultView = function () {
|
||||
this.rootView.view.children().remove();
|
||||
var html = "<ul>";
|
||||
for ( var i = 0; i < controller.rootData.movies.length; i ++ )
|
||||
{
|
||||
var movie = controller.rootData.movies[i];
|
||||
html += "<li id='" + movie.id + "'onclick='controller.renderDetails(\"" + i + "\")'>" + movie.title + "</li>";
|
||||
}
|
||||
html += "</ul>";
|
||||
this.rootView.view.html( html );
|
||||
if ( controller.tabletView ) {
|
||||
<link rel="stylesheet" href="viewnavigator/viewnavigator.css" type="text/css" />
|
||||
<script src="viewnavigator/viewnavigator.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="libs/css/activityIndicator.css" type="text/css" />
|
||||
|
||||
<link rel="stylesheet" href="splitviewnavigator/splitviewnavigator.css" type="text/css" />
|
||||
<script src="splitviewnavigator/splitviewnavigator.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
* {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
#detail {
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
#defaultView {
|
||||
text-align:center;
|
||||
padding-top:100px;
|
||||
}
|
||||
|
||||
.moviePoster {
|
||||
float:right;
|
||||
width:120px;
|
||||
height:178px;
|
||||
overflow:hidden;
|
||||
margin:10px;
|
||||
padding:2px;
|
||||
border:1px solid #999999;
|
||||
}
|
||||
|
||||
.listSelected {
|
||||
background-color:#424242;
|
||||
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
|
||||
background-image:-moz-linear-gradient(top, #0069d6, #999da9);
|
||||
background-image:-o-linear-gradient(top, #0069d6, #999da9);
|
||||
color: #FFF;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
ul,li {
|
||||
padding:0;
|
||||
margin:0;
|
||||
border:0;
|
||||
}
|
||||
|
||||
.viewNavigator_contentHolder li {
|
||||
padding:0 10px;
|
||||
border-bottom:1px solid #ccc;
|
||||
height:40px; line-height:40px;
|
||||
font-weight:normal;
|
||||
cursor:pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
|
||||
}
|
||||
|
||||
|
||||
#detail li {
|
||||
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
var API_KEY = "put your rotten tomatoes API key here";
|
||||
|
||||
var sampleData;
|
||||
|
||||
/* ==================== Controller ==================== */
|
||||
|
||||
var controller = {
|
||||
data : []
|
||||
};
|
||||
|
||||
controller.init = function () {
|
||||
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=25&country=us&apikey=" + API_KEY;
|
||||
console.log( url );
|
||||
|
||||
this.rootView = { title: "Rotten Tomatoes",
|
||||
backLabel: null,
|
||||
view: $("<div id='rootView'><div class='activityIndicator'></div></div>")
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
dataType: "json",
|
||||
success: function(data, textStatus, jqXHR) {
|
||||
|
||||
controller.rootData = data;
|
||||
controller.renderDefaultView();
|
||||
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
alert("error")
|
||||
}
|
||||
});
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
controller.renderDefaultView = function () {
|
||||
this.rootView.view.children().remove();
|
||||
var html = "<ul>";
|
||||
for ( var i = 0; i < controller.rootData.movies.length; i ++ )
|
||||
{
|
||||
var movie = controller.rootData.movies[i];
|
||||
html += "<li id='" + movie.id + "'onclick='controller.renderDetails(\"" + i + "\")'>" + movie.title + "</li>";
|
||||
}
|
||||
html += "</ul>";
|
||||
this.rootView.view.html( html );
|
||||
if ( controller.tabletView ) {
|
||||
setTimeout( function() {
|
||||
window.splitViewNavigator.sidebarViewNavigator.refreshScroller();
|
||||
}, 10 );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
controller.renderDetails = function (index) {
|
||||
var movie = controller.rootData.movies[index];
|
||||
|
||||
if ( controller.tabletView ) {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
controller.renderDetails = function (index) {
|
||||
var movie = controller.rootData.movies[index];
|
||||
|
||||
if ( controller.tabletView ) {
|
||||
window.splitViewNavigator.hideSidebar();
|
||||
window.splitViewNavigator.sidebarViewNavigator.content.find( "li" ).each(function(index) {
|
||||
$(this).removeClass( "listSelected" );
|
||||
});
|
||||
}
|
||||
else {
|
||||
controller.rootView.view.find( "li" ).each(function(index) {
|
||||
}
|
||||
else {
|
||||
controller.rootView.view.find( "li" ).each(function(index) {
|
||||
$(this).removeClass( "listSelected" );
|
||||
});
|
||||
}
|
||||
|
||||
$( "#"+movie.id ).addClass( "listSelected" );
|
||||
|
||||
var html = "<div id='detail'>";
|
||||
html += "<h1>" + movie.title + "</h1>";
|
||||
html += "<p><strong>" + movie.mpaa_rating + "</strong>, " + movie.runtime + "min. - (" + movie.year + ")</p>";
|
||||
html += "<img src=\"" + movie.posters.profile + "\" class='moviePoster'>";
|
||||
html += "<p>" + movie.synopsis + "</p>";
|
||||
html += "<h3>Ratings:</h3><p>";
|
||||
html += "<strong>Audience:</strong> " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "<br>"
|
||||
html += "<strong>Critics:</strong> " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "<br>"
|
||||
html += "</p>"
|
||||
html += "<h4>What the critics say:</h4><p>" + movie.critics_consensus + "</p>";
|
||||
html += "<h3>Cast:</h3><p><ul>";
|
||||
|
||||
for ( var i = 0; i < movie.abridged_cast.length; i ++ )
|
||||
{
|
||||
var actor = movie.abridged_cast[i];
|
||||
html += "<li><strong>" + actor.name + ":</strong> ";
|
||||
|
||||
if ( actor.characters ) {
|
||||
for ( var j = 0; j < actor.characters.length; j ++ )
|
||||
{
|
||||
if ( j > 0 ) { html += ", " };
|
||||
html += actor.characters[j];
|
||||
}
|
||||
}
|
||||
|
||||
html += "</li>";
|
||||
}
|
||||
|
||||
html += "</ul></p>";
|
||||
|
||||
html += "</div>";
|
||||
|
||||
var viewDescriptor = { title: movie.title,
|
||||
view: $(html)
|
||||
};
|
||||
|
||||
if ( controller.tabletView ) {
|
||||
window.splitViewNavigator.replaceBodyView( viewDescriptor );
|
||||
}
|
||||
else {
|
||||
viewDescriptor.backLabel = "Back";
|
||||
window.viewNavigator.pushView( viewDescriptor );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
controller.init();
|
||||
var _w = Math.max( $(window).width(), $(window).height() );
|
||||
var _h = Math.min( $(window).width(), $(window).height() );
|
||||
controller.tabletView = (_w >= 1000 && _h >= 600);
|
||||
|
||||
var defaultView = { title: "Rotten Tomatoes",
|
||||
view: $("<div id='defaultView'><img src='assets/tomato.jpeg' /></div>")
|
||||
};
|
||||
|
||||
if ( controller.tabletView ) {
|
||||
//Setup the ViewNavigator
|
||||
new SplitViewNavigator( 'body', "Movies" );
|
||||
window.splitViewNavigator.pushSidebarView( controller.rootView );
|
||||
window.splitViewNavigator.pushBodyView( defaultView );
|
||||
}
|
||||
else {
|
||||
//phone view
|
||||
window.viewNavigator = new ViewNavigator( 'body', "Movies" );
|
||||
window.viewNavigator.pushView( controller.rootView );
|
||||
}
|
||||
} );
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
}
|
||||
|
||||
$( "#"+movie.id ).addClass( "listSelected" );
|
||||
|
||||
var html = "<div id='detail'>";
|
||||
html += "<h1>" + movie.title + "</h1>";
|
||||
html += "<p><strong>" + movie.mpaa_rating + "</strong>, " + movie.runtime + "min. - (" + movie.year + ")</p>";
|
||||
html += "<img src=\"" + movie.posters.profile + "\" class='moviePoster'>";
|
||||
html += "<p>" + movie.synopsis + "</p>";
|
||||
html += "<h3>Ratings:</h3><p>";
|
||||
html += "<strong>Audience:</strong> " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "<br>"
|
||||
html += "<strong>Critics:</strong> " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "<br>"
|
||||
html += "</p>"
|
||||
html += "<h4>What the critics say:</h4><p>" + movie.critics_consensus + "</p>";
|
||||
html += "<h3>Cast:</h3><p><ul>";
|
||||
|
||||
for ( var i = 0; i < movie.abridged_cast.length; i ++ )
|
||||
{
|
||||
var actor = movie.abridged_cast[i];
|
||||
html += "<li><strong>" + actor.name + ":</strong> ";
|
||||
|
||||
if ( actor.characters ) {
|
||||
for ( var j = 0; j < actor.characters.length; j ++ )
|
||||
{
|
||||
if ( j > 0 ) { html += ", " };
|
||||
html += actor.characters[j];
|
||||
}
|
||||
}
|
||||
|
||||
html += "</li>";
|
||||
}
|
||||
|
||||
html += "</ul></p>";
|
||||
|
||||
html += "</div>";
|
||||
|
||||
var viewDescriptor = { title: movie.title,
|
||||
view: $(html)
|
||||
};
|
||||
|
||||
if ( controller.tabletView ) {
|
||||
window.splitViewNavigator.replaceBodyView( viewDescriptor );
|
||||
}
|
||||
else {
|
||||
viewDescriptor.backLabel = "Back";
|
||||
window.viewNavigator.pushView( viewDescriptor );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$(document).ready( function() {
|
||||
|
||||
controller.init();
|
||||
var _w = Math.max( $(window).width(), $(window).height() );
|
||||
var _h = Math.min( $(window).width(), $(window).height() );
|
||||
controller.tabletView = (_w >= 1000 && _h >= 600);
|
||||
|
||||
var defaultView = { title: "Rotten Tomatoes",
|
||||
view: $("<div id='defaultView'><img src='assets/tomato.jpeg' /></div>")
|
||||
};
|
||||
|
||||
if ( controller.tabletView ) {
|
||||
//Setup the ViewNavigator
|
||||
new SplitViewNavigator( 'body', {
|
||||
toggleButtonLabel: 'Movies'
|
||||
});
|
||||
window.splitViewNavigator.pushSidebarView( controller.rootView );
|
||||
window.splitViewNavigator.pushBodyView( defaultView );
|
||||
}
|
||||
else {
|
||||
//phone view
|
||||
window.viewNavigator = new ViewNavigator( 'body' );
|
||||
window.viewNavigator.pushView( controller.rootView );
|
||||
}
|
||||
} );
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
@ -11,7 +11,16 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*/
|
||||
|
||||
|
||||
var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindToWindow ) {
|
||||
var SplitViewNavigator = function( target, options ) {
|
||||
|
||||
var defaults = {
|
||||
CSSNamespace: 'splitViewNavigator_',
|
||||
toggleButtonLabel: 'Menu',
|
||||
backLinkCSS: 'viewNavigator_backButton',
|
||||
bindToWindow: true
|
||||
};
|
||||
|
||||
this.options = options = $.extend( {}, defaults, options );
|
||||
|
||||
this.animating = false;
|
||||
this.animationDuration = 350;
|
||||
@ -23,18 +32,16 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
|
||||
var regexp = new RegExp('Windows Phone OS 7');
|
||||
this.winPhone = (navigator.userAgent.search(regexp) >= 0);
|
||||
|
||||
this.rootElement = $('<div class="splitViewNavigator_root"></div>');
|
||||
this.sidebarContainer = $('<div class="splitViewNavigator_sidebar"></div>');
|
||||
this.rootElement = $('<div class="' + options.CSSNamespace + 'root"></div>');
|
||||
this.sidebarContainer = $('<div class="' + options.CSSNamespace + 'sidebar"></div>');
|
||||
this.contentOverlay = $('<div class="content_overlay_hidden" id="overlay'+this.uniqueId+'"></div>');
|
||||
this.bodyContainer = $('<div class="splitViewNavigator_body"></div>');
|
||||
this.bodyContainer = $('<div class="' + options.CSSNamespace + 'body"></div>');
|
||||
|
||||
this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], backLinkCSS, false );
|
||||
this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], options.backLinkCSS, false );
|
||||
|
||||
this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], backLinkCSS, false );
|
||||
this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], options.backLinkCSS, false );
|
||||
|
||||
this.backLinkCSS = backLinkCSS ? backLinkCSS : 'viewNavigator_backButton';
|
||||
|
||||
this.toggleSidebarButton = $('<li class="viewNavigator_backButton viewNavigator_backButtonPosition ' + backLinkCSS + '" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">'+toggleButtonLabel+'</li>');
|
||||
this.toggleSidebarButton = $('<li class="viewNavigator_backButton viewNavigator_backButtonPosition ' + options.backLinkCSS + '" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">' + options.toggleButtonLabel + '</li>');
|
||||
|
||||
this.rootElement.append( this.bodyContainer );
|
||||
this.rootElement.append( this.contentOverlay );
|
||||
@ -52,7 +59,7 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
|
||||
this.parent.resize( function(event){ self.resizeContent() } );
|
||||
//}
|
||||
|
||||
if ( bindToWindow != false ) {
|
||||
if ( options.bindToWindow != false ) {
|
||||
$(window).resize( function(event){ self.resizeContent() } );
|
||||
}
|
||||
else {
|
||||
|
||||
@ -11,7 +11,15 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*/
|
||||
|
||||
|
||||
var ViewNavigator = function( target, backLinkCSS, bindToWindow ) {
|
||||
var ViewNavigator = function( target, options ) {
|
||||
|
||||
var defaults = {
|
||||
CSSNamespace: 'viewNavigator_',
|
||||
backLinkCSS: 'viewNavigator_backButton',
|
||||
bindToWindow: true
|
||||
};
|
||||
|
||||
this.options = options = $.extend( {}, defaults, options );
|
||||
|
||||
this.supportsBackKey = true; //phonegap on android only
|
||||
this.animating = false;
|
||||
@ -26,22 +34,20 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) {
|
||||
var regexp = new RegExp('Windows Phone OS 7');
|
||||
this.winPhone = (navigator.userAgent.search(regexp) >= 0);
|
||||
|
||||
this.rootElement = $('<div class="viewNavigator_root"></div>');
|
||||
this.header = $('<div class="viewNavigator_header"></div>');
|
||||
this.content = $('<div class="viewNavigator_content" id="contentRoot"></div>');
|
||||
this.rootElement = $('<div class="' + this.options.CSSNamespace + 'root"></div>');
|
||||
this.header = $('<div class="' + options.CSSNamespace + 'header"></div>');
|
||||
this.content = $('<div class="' + options.CSSNamespace + 'content" id="contentRoot"></div>');
|
||||
this.rootElement.append( this.header );
|
||||
this.rootElement.append( this.content );
|
||||
|
||||
this.parent = $( target );
|
||||
|
||||
this.backLinkCSS = backLinkCSS ? backLinkCSS : 'viewNavigator_backButton';
|
||||
|
||||
var self = this;
|
||||
//$(window).resize( function(event){ self.resizeContent() } );
|
||||
//alert( this.parent.toString() );
|
||||
//this.parent.resize( function(event){ self.resizeContent() } );
|
||||
|
||||
if ( bindToWindow != false ) {
|
||||
if ( options.bindToWindow != false ) {
|
||||
$(window).resize( function(event){ self.resizeContent() } );
|
||||
}
|
||||
else {
|
||||
@ -106,19 +112,17 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
|
||||
this.animating = true;
|
||||
|
||||
|
||||
|
||||
|
||||
this.contentPendingRemove = this.contentViewHolder;
|
||||
this.headerContentPendingRemove = this.headerContent;
|
||||
|
||||
this.headerContent = $('<div class="viewNavigator_headerContent"></div>');
|
||||
this.headerContent = $('<div class="' + this.options.CSSNamespace + 'headerContent"></div>');
|
||||
|
||||
this.headerTitle = $('<div class="viewNavigator_header_title">' + viewDescriptor.title + '</div>');
|
||||
this.headerTitle = $('<div class="' + this.options.CSSNamespace + 'header_title">' + viewDescriptor.title + '</div>');
|
||||
this.headerContent.append( this.headerTitle );
|
||||
|
||||
var linkGuid = this.guid();
|
||||
if ( viewDescriptor.backLabel ) {
|
||||
this.headerBacklink = $('<li class="viewNavigator_header_backlink viewNavigator_backButtonPosition ' + this.backLinkCSS +'" id="link' + linkGuid + '" onclick="window.viewNavigators[\'' + this.uniqueId + '\'].popView()">'+ viewDescriptor.backLabel + '</li>');
|
||||
this.headerBacklink = $('<li class="' + this.options.CSSNamespace + 'header_backlink ' + this.options.CSSNamespace + 'backButtonPosition ' + this.options.backLinkCSS +'" id="link' + linkGuid + '" onclick="window.viewNavigators[\'' + this.uniqueId + '\'].popView()">'+ viewDescriptor.backLabel + '</li>');
|
||||
this.headerContent.append( this.headerBacklink );
|
||||
|
||||
//this is for proper handling in splitviewnavigator
|
||||
@ -126,7 +130,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
|
||||
}
|
||||
|
||||
var id = this.guid();
|
||||
this.contentViewHolder = $('<div class="viewNavigator_contentHolder" id="' + id + '"></div>');
|
||||
this.contentViewHolder = $('<div class="' + this.options.CSSNamespace + 'contentHolder" id="' + id + '"></div>');
|
||||
this.contentViewHolder.append( viewDescriptor.view );
|
||||
this.resizeContent();
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user