Pagify.js
A jQuery plugin for effortlessly creating single page web sites. Demo
Features
- Simple - include pagify.js, create a div, make one jQuery call and you're done!
- Lightweight - pagify.js is far less than 100 lines of code, well commented and easy to understand and extend!
- Flexible - Get started by only specifying a list of pages or customize animations, default pages and caching!
- Fast - Load all pages upfront or load on the fly; a simple $.get() is used to get content with minimal proccessing!
- Clean - Replace long HTML files broken up into sections and verbose JS to do the simple task of switching content!
- Couldn't find an adjective... - Uses only Javascript and HTML so it can be uploaded like any other static site!
Usage
Checkout the simple demo to see how it works, or...
Create a container page:
Load Pagify and jQuery:
<script src="jquery.min.js" type="text/javascript"></script>
<script src="pagify.js" type="text/javascript"></script>
Create a div that will contain page content:
<div id='page_holder' />
Call pagify on the aforementioned div and pass in options. The only required option is pages.
$('#page_holder').pagify({
pages: ['home', 'about', 'contact'],
'default': 'home' // The name of a page or null for an empty div
});
Link to other pages by linking to hashes of their page names:
<a href='#contact'>Contact</a>
<a href='#about'>About</a>
...
Write other pages
Create content pages in the same directory as the container as [page_name].html
i.e. about.html
<h1>About us</h1>
<p>This is an about page!</p>
Options
pages - an array of page names. Required.
default - the page that is loaded on startup. null is default (for an empty div).
animation - the jQuery animation that is used to show pages, i.e. fadeIn, show, slideUp, slideDown. show is default.
animationSpeed - the speed of the animation, i.e. fast, slow, 1000. 'normal' is default.
animationOut - the jQuery animation that is used to hide pages, i.e. fadeOut, hide, slideUp, slideDown. hide is default.
animationOutSpeed - the speed of the animationOut, i.e. fast, slow, 1000. 0 is default.
cache - true or false. Determines if all pages are loaded upfront or not. false is default.
onChange - a function that takes the page name as a parameter and is executed when the page changes. empty function is default.
Etc...
Created by @ChrisPolis, blog