Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add new methods to ViewNavigator and SlidingView #59

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add new methods to ViewNavigator and SlidingView #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
45566b0
Adds toggle and enable/disable methods to the SlidingView, and provid…
dancj Apr 10, 2015
266a9fa
Adds a sample using BackboneJS to render viewnavigator. Adds function…
dancj May 5, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 24 additions & 3 deletions samples/03 - slidingView/01 - basic/index.html
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,17 @@
$(document).ready( function() {

//Setup the ViewNavigator
new SlidingView( 'sidebar', 'body' );
var slider = new SlidingView( 'sidebar', 'body' );

$("#slide").click(function() {
slider.toggle();
});
$("#enable").click(function() {
slider.enable();
});
$("#disable").click(function() {
slider.disable();
});
} );


Expand All @@ -31,12 +41,23 @@
background-color: white;
padding:10px;
}
#header {
background-color: green;
min-height:20px;
}
#wrapper {
top:25px;
}
</style>

</head>
<body>

<div class="slidingview_wrapper">
<div id="header">
<input type="button" id="slide" value="slide">
<input type="button" id="enable" value="enable">
<input type="button" id="disable" value="disable">
</div>
<div class="slidingview_wrapper" id="wrapper">
<div id="sidebar">sidebar here!</div>
<div id="body">body here!</div>
</div>
Expand Down
19 changes: 19 additions & 0 deletions samples/06 - backbonejs viewnavigator/01 - basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Backbone 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>
<script src="../underscore-min.js"></script>
<script src="../backbone-min.js"></script>
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="main.js"></script>

</head>
<body></body>
</html>
86 changes: 86 additions & 0 deletions samples/06 - backbonejs viewnavigator/01 - basic/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
var BackboneView = Backbone.View.extend({
backLabel: null,

/**
* ViewNavigator hook for when page is loaded/resumed
*/
showCallback: function () {
// refresh view
this.render();
},

events: {

},

/**
* Initialize called once when view created
*/
initialize: function(string, viewId) {
this.string = string;
this.title = "Title: " + viewId;
this.view = this.$el;
this.numRenders = 0;
},

/**
* Render needs to be called when ViewNavigator fires ShowCompleted
*/
render: function() {
this.numRenders++;
var bodyView = $('<div><b>Rendered ' + this.numRenders + ' times</b><hr/><li href="#" onclick="pushView()" class="viewNavigator_backButton">push view</li> <li href="#" onclick="popView()" class="viewNavigator_backButton">pop view</li><li href="#" onclick="replaceView()" class="viewNavigator_backButton">replace view</li> <li href="#" onclick="replaceWithRootView()" class="viewNavigator_backButton">replace with home view</li><hr>' + this.string + '</div>');
this.$el.html(bodyView);
//alert("rendered: " + this.viewId);
return this;
},

showCallback: function () {
this.render();
}

});

$(document).ready( function() {

//Setup the default view
var myView = new BackboneView(getMeat(), Math.random().toString());

//Setup the ViewNavigator
window.viewNavigator = new ViewNavigator( 'body' );
window.viewNavigator.pushView( myView );


} );

function pushView() {
//create a view and push it onto the view navigator
var view = new BackboneView(getMeat(), Math.random().toString());
window.viewNavigator.pushView( view );
}

function replaceView() {
//create a new view and replace the current view
var view = new BackboneView(getMeat(), Math.random().toString());
window.viewNavigator.replaceView( view );
}

function replaceWithRootView() {
// clear the view stack down to the root view
window.viewNavigator.jumpHome();
}

function popView() {
//pop a view from the view navigator
window.viewNavigator.popView();
}

function getMeat() {
//randomly generate content
//text string generated by http://baconipsum.com/
var iterations = 1 + parseInt(Math.random() * 25);
var result = "";
for ( var i = 0; i < iterations; i ++ ) {
result += "Pork chop corned beef meatloaf prosciutto flank, chuck andouille fatback hamburger cow ham turkey. Drumstick filet mignon boudin, salami beef ribs ball tip turducken frankfurter chuck. Pork chop swine chuck meatloaf capicola tri-tip. Pork belly venison bresaola flank, jerky ham hock short loin ground round corned beef salami pork filet mignon tri-tip sirloin. Tenderloin meatball corned beef, boudin brisket bresaola rump short loin tri-tip spare ribs pork belly cow.<hr>"
}
return result;
}
2 changes: 2 additions & 0 deletions samples/06 - backbonejs viewnavigator/backbone-min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading