Effortlessly create single page web sites with this jQuery plugin.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
README.md
pagify.js Added ability to specify a base page path. If specified all loaded pa… Jul 30, 2013

README.md

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

MIT License