Home

Awesome

Description

jqmNavigator is an extension for jQuery Mobile and Backbone.js frameworks. It was inspired by BackStack library which was inspired by ViewNavigator API from the mobile SDK of the Apache Flex framework. It gives developers simple mechanizm to programatically manage jQueryMobile/Backbone pages/views.

Usage

Defining view is as simple as defining Backbone View:


  var MyView = Backbone.View.extend({
    
    // jQM events like pageshow, pagehide handling
    events:{
      'pageshow':'this_pageshowHandler',
      'pagehide':'this_pagehideHandler'
    },
    
    render:function() {
      
      // Optionally it could be loaded from a template file, using for example RequrieJS text plugin
      var pageHTML = '<div data-role="header"><h1>jQM Header</h1></div>'
        + '<div data-role="content">Hello World!</div>';
      
      this.$el.html(pageHTML);
      
      return this;
    },
    
    this_pageshowHandler:function(event) {
      console.log('View was shown!');
    },
    
    this_pagehideHandler:function(event) {
      console.log('View was hidden!');
    }
    
  });

Pushing new view to the stack:

$.mobile.jqmNavigator.pushView(new MyView());

Popping a view from the stack:

$.mobile.jqmNavigator.popView();

Popping all views except the first one from the stack:

$.mobile.jqmNavigator.popToFirst();

Replacing view on top of the stack:

$.mobile.jqmNavigator.replaceView(new MyView2());

Replacing all views on the stack:

$.mobile.jqmNavigator.replaceAll(new MyView2());

All functions above accept additional argument with transition options, these options are the same as options of jQM changePage function:

$.mobile.jqmNavigator.pushView(new MyView(), {reverse:true, transition:'slide'});

Examples