‌

Installation

Javascript

Dependencies

• modernizr
• zepto
• zepto flickable
• lodash
• backbone

Each of these dependencies is included in the lib/javascripts directory.

junior.js

junior.js is included in the src/javascripts directory. Include each of the dependencies and junior.js in the following order:

<script src="lib/javascripts/modernizr.custom.15848.js"></script>
<script src="lib/javascripts/zepto.min.js"></script>
<script src="lib/javascripts/zepto.flickable.min.js"></script>
<script src="lib/javascripts/lodash.min.js"></script>
<script src="lib/javascripts/backbone-min.js"></script>
<script src="src/javascripts/junior.js"></script>

CSS

Dependencies

• ratchet

This dependency is included in the lib/stylesheets directory.

junior.css

junior.css is included in the src/stylesheets directory. Include the css in the following order in the head of the document:

<link rel="stylesheet" href="lib/stylesheets/ratchet.css"/>
<link rel="stylesheet" href="src/stylesheets/junior.css"/>

HTML

junior.js expects you to have a #app-container and #app-main in your body like this. This is where the animations and transitions happen.

<div id="app-container">
    <div id="app-main">
    </div>
</div>

‌

Examples

Annoted example.js

The best and most detailed example for how to get started is the Annotated Example for example.js. That is the javascript behind the live demo on this page. However, if you are pretty confident that you can catch on quickly, then just read the more brief explanations on this page.

Jr.Router

Jr.Router is simply an extension of Backbone.Router. It gives you a renderView method to automatically render your view with an animation. A typical router may look like this (assuming each view is defined elsewhere):

var AppRouter = Jr.Router.extend({
    routes: {
      '': 'home',
      'about': 'about',
      'details': 'details'
    },

    home: function(){
      var homeView = new HomeView();
      this.renderView(homeView);
    },

    details: function() {
      var detailsView = new DetailsView();
      this.renderView(detailsView);
    }

});
      

Jr.View

Jr.View is optional for you to use. It extends from Backbone.View. All it does is automatically bind a touchend event in place of a click event if it detects you are using a touch device. A simple example is like this:

var HomeView = Jr.View.extend({
  render: function(){
    this.$el.html("<button class="some-element">Hi</button>");
    return this;
  },

  events: {
    'click .some-element': 'onClickSomeElement'
  },

  onClickSomeElement: function() {
    console.log('This event occurs on touchend on mobile or on click otherwise')
  }

});

Jr.Navigator

Jr.Navigator is how you trigger a navigation using an animation. It works a lot like Backbone.history.navigate:

Jr.Navigator.navigate('details',{
  trigger: true,
  animation: {
    type: Jr.Navigator.animations.SLIDE_STACK,
    direction: Jr.Navigator.directions.RIGHT
  }
});

Currently the only animations that we have is SLIDE_STACK. This slides from one view to the next. Also the only directions that we have is RIGHT and LEFT. In the future we would like to have many more animations.

‌

Sources and Credits

• Thanks to Ratchet for the inspiration and the great mobile UI styles.
• Thanks to modernizr.js .
• Thanks to zepto.js .
• Thanks to the zepto flickable plugin .
• Thanks to lodash.js .
• Thanks to backbone.js .
• Thanks to Font Awesome which is used in these docs.
• Thanks to Twitter Bootstrap which is also used in these docs.