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 |
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.