Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Mobile Web App Framework for easy building Navegation backbone structure - Just native Javascript/HTML5/CSS3
JavaScript
branch: master

README.md

jbackbone-mobile

Mobile Web App Framework for easy building Mobile Navigation Structures -> Just using native Javascript, HTML5 and CSS3.

Working perfectly on iOS and Android devices.

Main concepts:

So, A PAGE:

  • It should have a main DIV with a unique ID (i.e : 'sample-page').
  • As it is a PAGE referenced from Menu it must have JUST the 'block' class.
  • As it is a PAGE it should contains a "Menu button" in its header.
  • A page always has a 'section' where it contains the page content.
  • A page could contain one (or more) link(s) to PAGES or SUBPAGES.

Then, A SUB-PAGE:

  • It should have a main DIV with a unique ID (i.e : 'sample-subpage').
  • As it is a SUBPAGE referenced from another PAGE, it must have BOTH the 'block' and 'sub-block' classes.
  • As it is a SUBPAGEPAGE it should contain a "Back button" in its header.
  • A subpage always has a 'section' where it contains the subpage content.
  • A subpage could contains one (or more) link(s) to PAGES or SUBAPGES.

Other concepts:

There are several reserved IDs and wouldn't be reused. The most important are:

  • 'index', this ID identifies first page to be loaded at start (see sample-page1.html).
  • 'menu-page', this ID identifies the main menu page, noramlly located on the left side of your application.
  • 'slider' and 'binder', these two IDs are used for the JS library for animation and sliding porpose.

Methods you may know:

  • jbackbone.goToPage('whatever page ID you want to go') --> This method takes you the page you want to go.

  • jbackbone.goToPage('whatever page ID you want to go',{animate:false,resetHistory:true}) --> It is the same us the one before but this one is normally used in links in the menu-page. When you navigate from a page to another of your application the library keeps a history of your pages visited. When you start click from the menu is useful to reset your navigation history. (See sampple-menu.html).

  • jbackbone.toggleMenu(); --> Method used for toggle the menu page whenever is clicked the menu button.

  • jbackbone.goBack(); --> Method used for go back on your navigation history when you click on back button on a deeper page.

HOW TO USE IT

1.- Create an index.html page using the "index.html" sample code provided. Notice how to link the javascript library into the header section.

2.- Add a javascript code in your header as this one, where to indicate which pages build your application.

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {

        /**
         IMPORTANT!!!!!
         1. Read instructions before 
         2. JUST MODIFY THIS SECTION ADDING YOUR PAGES TO THE LIST BELOW 
         **/
        var config = {
            pages:[         
                'sample-menu.html', 
                'sample-menu2.html', 
                'sample-page1.html',    
                'sample-page2.html', 
                'sample-page3.html',
                'sample-subpage-l1.html',   
                'sample-subpage-l2.html'
            ],
            MENU_MARGIN: 80   //Margin it leaves on the menu after sliding.
        };                  


        /** Track all page initialisation **/
        jbackbone.addPageInitListener(function(newPage){
            console.log('Page was initialised: '+newPage);
        },'sample-page2');

        jbackbone.init(config);

        /** Track all page changes change **/
        jbackbone.addPageChangeListener(function(oldPage,newPage){
            console.log('Page changed from '+oldPage+' to '+newPage);
        });
        /** Track specific page change **/
        jbackbone.addPageChangeListener(function(oldPage,newPage){
            console.log('Special page is here!');
        },'sample-page2');  

    }, false);

</script>

3.- Implement as many PAGES as you want according the instructions given and examples provided.

4.- HAVE FUN!!!

Working perfectly on iOS and Android devices.

Something went wrong with that request. Please try again.