iScroll plugin for the Backbone Responsive CSS3 Page Transitions Plugin (v0.3+)
Demos of the CSS frameworks @ the project homepage
Demo code available from the github repo
Grab from Jam.js:
me@badass:~$ jam install backbone.responsiveCSS3transitions.iscroll
or Bower:
me@badass:~$ bower install backbone.responsiveCSS3transitions.iscroll
<link rel="stylesheet" href="scripts/vendor/backbone.responsiveCSS3transitions.min.css"/>
<!-- place after the main plugin css so the styles cascade -->
<link rel="stylesheet" href="scripts/vendor/backbone.responsiveCSS3transitions.iscroll.min.css"/>
</head>
<body>
<!-- order is important to satisfy dependencies -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="static/js/vendor/iscroll4.js"></script>
<script src="backbone.responsiveCSS3transitions.min.js"></script>
<script src="backbone.responsiveCSS3transitions.min.iscroll.js"></script>
var threeDRouter = backboneResponsiveCSS3Transitions.extend({...});
new threeDRouter();
// your view....
var myBackboneView = Backbone.View.extend({
className: 'my-container', // must be class NOT an id
render: function () {
this.$el.html('the html of the new page to be inserted');
}
});
iscroll needs an id reference which is provided in the plugin. Just use classes for your backbone views and everything will be fine.
Follow the rest of the set up instructions at the main plugin repo.
You still have all the functionality of the base plugin but now you get the following exta.
var options = {
// brand new!
"iScroll": {
"activeDefault": true,
"positionScroller": true,
"scrollerClass": "myScrollbarOutside",
"options": {
"bounce" : false
}
},
// old and boring options...
"fastClick": window.FastClick,
"wrapElement": ".wrapper"
};
var threeDRouter = backboneResponsiveCSS3Transitions.extend({....});
threeDRouter = new threeDRouter(options);
- accepts: jQuery selector of element to wrap > ensure this element does not have an ID. iScroll needs an id which is assigned in the plugin
- good: "wrapElement": ".wrapper"
- bad: "wrapElement": "#my-wrapper"
- accepts: object
- accepts: boolean
- default: true
- description: do you want iscroll to be enabled at application start up?
- accepts: boolean
- default: false
- description: do you want the scroller to be positioned at the edge of the screen? Useful if your wrapping div has outside margins.
- accepts: string
- description: iScroll will add this classname to the scroller so you can style it how you like
-
accepts: object
-
description: the object passed to iScroll constructor when instantiating
// ...somewhere in the bowels of backbone.responsiveCSS3transitions.iscroll.js // forget about the first param - the plugin takes care of that new iScroll('iscroll-wrapper', options.iScroll.options);
You can enable/disable the iscroll plugin after instantiation in the following ways:
-
calling the toggle toggleiScrollActive method
var threeDRouter = backboneResponsiveCSS3Transitions.extend({....}); threeDRouter = new threeDRouter(options); // fire! threeDRouter.trigger('threeDTransiScroll.toggleiScroll'); -
triggering 'threeDTransiScroll.toggleiScroll' event on the router
var threeDRouter = backboneResponsiveCSS3Transitions.extend({....}); threeDRouter = new threeDRouter(options); // called method threeDRouter.toggleiScrollActive(); -
passing the options.iScrollActive parameter to the triggerTransition method
var threeDRouter = backboneResponsiveCSS3Transitions.extend({....}); threeDRouter = new threeDRouter(options); // set trigger transition option threeDRouter.triggerTransition(ViewClass, {"iScrollActive" : false});