jQuery Based Single Page Web App Template - Spapp.js

File Size: 7.9 KB
Views Total: 4764
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Based Single Page Web App Template - Spapp.js

Spapp.js is a very small jQuery plugin that makes it easy to create a fullscreen tab view for your single page web application. The plugin makes use of AJAX requests to switch between html views by clicking on the anchor links.

How to use it:

1. Include jQuery library together with the spapp.css and jquery.spapp.js on the webpage.

<link rel="stylesheet" href="aspapp.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.spapp.js"></script>

2. The primary HTML structure. You can specify the external page to be loaded into view using the data-load attribute as follows:

<main id="spapp" role="main">
  <section id="view_2"></section>
  <section id="view_3"><h1>view 3</h1></section>
  <section id="error_404"><h1>Page not found</h1></section>
  <section id="view_1" data-load="view_1.html" ></section>
</main>

3. Create a navigation with anchor links pointing to different content sections.

<nav role="navigation">
  <ul>
    <li><a href="#view_1">go to view 1</a></li>
    <li><a href="#view_2">go to view 2</a></li>
    <li><a href="#view_3">go to view 3</a></li>
  </ul>
</nav>

4. The core JavaScript.

$(document).ready(function() {

  $("main#spapp > section").height($(document).height() - 60);

  var app = $.spapp({pageNotFound : 'error_404'}); // initialize

  // define routes
  app.route({
    view: 'view_1',
    onCreate: function() { $("#view_1").append($.now()+': Written on create<br/>'); },
    onReady: function() { $("#view_1").append($.now()+': Written when ready<br/>'); }
  });
  app.route({view: 'view_2', load: 'view_2.html' });
  app.route({
    view: 'view_3', 
    onCreate: function() { $("#view_3").append("I'm the third view"); }
  });

  // run app
  app.run();

});

This awesome jQuery plugin is developed by amiletti. For more Advanced Usages, please check the demo page or visit the official website.