https://github.com/techjacker/backbone-responsive-css3-page-transitions-iscroll-plugin

iScroll plugin for the Backbone Responsive CSS3 Page Transitions
https://github.com/techjacker/backbone-responsive-css3-page-transitions-iscroll-plugin

Last synced: 15 days ago
JSON representation

iScroll plugin for the Backbone Responsive CSS3 Page Transitions

• Host: GitHub
• URL: https://github.com/techjacker/backbone-responsive-css3-page-transitions-iscroll-plugin
• Owner: techjacker
• License: mit
• Created: 2012-11-16T15:19:11.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2012-11-17T20:19:34.000Z (almost 12 years ago)
• Last Synced: 2024-10-09T16:06:17.838Z (about 1 month ago)
• Language: JavaScript
• Size: 127 KB
• Stars: 3
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE-MIT

Awesome Lists containing this project

README

        
Backbone-Responsive-CSS3-Page-Transitions-iScroll-Plugin

========================================================

iScroll plugin for the [Backbone Responsive CSS3 Page Transitions Plugin](https://github.com/techjacker/Backbone-Responsive-CSS3-Page-Transitions) (v0.3+)

### Demos

[Demos](http://projects.andrewgriffithsonline.com/#backbone-responsive-CSS3-page-transitions) of the CSS frameworks @ [the project homepage](http://projects.andrewgriffithsonline.com/#backbone-responsive-CSS3-page-transitions)

Demo code available from the [github repo](https://github.com/techjacker/Backbone-CSS3-Page-Transitions-CSS-Frameworks-Demos)

## Install via Package Manager

Grab from [Jam.js](http://jamjs.org/packages/#/details/backbone.responsiveCSS3transitions.iscroll):

	me@badass:~$ jam install backbone.responsiveCSS3transitions.iscroll

or [Bower](https://npmjs.org/package/bower):

	me@badass:~$ bower install backbone.responsiveCSS3transitions.iscroll

## Getting Started

### 1. Loading the JS + CSS

		

		

		

	

	

		

		

		

		

		

		

		

### 2. Make your router inherit from backboneResponsiveCSS3Transitions instead of Backbone.Router

	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');

		}

	});

#### Important! Reference your container via classname NOT id

iscroll needs an id reference which is provided in the plugin. Just use classes for your backbone views and everything will be fine.

#### Remaining Set Up Steps..

Follow the rest of the set up instructions at the [main plugin repo](https://github.com/techjacker/Backbone-Responsive-CSS3-Page-Transitions).

## API Reference

You still have all the functionality of the base plugin but now you get the following exta.

### 1. iScroll Plugin Init Options

	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);

##### @param {options.wrapElement}

* 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"

##### @param {options.iScroll}

* accepts: object

##### @param {options.iScroll.activeDefault}

* accepts: boolean

* default: true

* description: do you want iscroll to be enabled at application start up?

##### @param {options.iScroll.positionScroller}

* 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.

##### @param {options.iScroll.scrollerClass}

* accepts: string

* description: iScroll will add this classname to the scroller so you can style it how you like

##### @param {options.iScroll.options}

* 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);

### 2. enable/disable the iscroll plugin after instantiation

You can enable/disable the iscroll plugin after instantiation in the following ways:

1. calling the toggle toggleiScrollActive method

		var threeDRouter = backboneResponsiveCSS3Transitions.extend({....});

		threeDRouter = new threeDRouter(options);

		// fire!

		threeDRouter.trigger('threeDTransiScroll.toggleiScroll');

2. triggering 'threeDTransiScroll.toggleiScroll' event on the router

		var threeDRouter = backboneResponsiveCSS3Transitions.extend({....});

		threeDRouter = new threeDRouter(options);

		// called method

		threeDRouter.toggleiScrollActive();

3. 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});