A repository of over 1000 quality jQuery plugins

jQuery JqmNavigator

JqmNavigator is a jQuery Responsive & Drawer plugin.

Created by Pwalczyszyn

This is an extension library for jQuery Mobile and Backbone.js frameworks

Not what you're looking for? Click here to view more Responsive & Drawer jQuery plugins

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



You might also like these other Responsive & Drawer jQuery Plugins

  • hiraku

    “hiraku” means “open” in Japanese. As you can imagine, “offcanvas-menu” is like a drawer and it is of...

  • JQuery MobileNav

  • LayerNav

    A small, jQuery-powered navigation menu for mobile and up

License:

Apache License