2011-09-15 03:10:47 +03:00
|
|
|
# Pagify.js
|
|
|
|
|
2011-09-16 04:55:59 +03:00
|
|
|
A jQuery plugin for effortlessly creating single page web sites. [Demo](http://cmpolis.github.com/Pagify)
|
2011-09-15 03:10:47 +03:00
|
|
|
|
2011-09-16 02:17:44 +03:00
|
|
|
### 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!
|
|
|
|
|
2011-09-15 03:10:47 +03:00
|
|
|
## Usage
|
|
|
|
|
2011-09-16 02:17:44 +03:00
|
|
|
_Checkout the simple demo to see how it works, or..._
|
|
|
|
|
2011-09-16 01:53:59 +03:00
|
|
|
### Create a _container_ page:
|
|
|
|
|
2011-09-15 03:10:47 +03:00
|
|
|
Load Pagify and jQuery:
|
|
|
|
|
2011-09-15 03:12:30 +03:00
|
|
|
``` html
|
2011-09-15 03:10:47 +03:00
|
|
|
<script src="jquery.min.js" type="text/javascript"></script>
|
|
|
|
<script src="pagify.js" type="text/javascript"></script>
|
|
|
|
```
|
|
|
|
|
2011-09-16 01:53:59 +03:00
|
|
|
Create a div that will contain page content:
|
|
|
|
|
|
|
|
``` html
|
|
|
|
<div id='page_holder' />
|
|
|
|
```
|
|
|
|
|
|
|
|
Call __pagify__ on the aforementioned div and pass in options. _The only required option is `pages`._
|
2011-09-15 03:10:47 +03:00
|
|
|
|
|
|
|
``` js
|
2011-09-15 03:12:02 +03:00
|
|
|
$('#page_holder').pagify({
|
2011-09-15 03:10:47 +03:00
|
|
|
pages: ['home', 'about', 'contact'],
|
2011-09-30 14:17:23 +03:00
|
|
|
'default': 'home' // The name of a page or null for an empty div
|
2011-09-15 03:10:47 +03:00
|
|
|
});
|
|
|
|
```
|
|
|
|
|
2011-09-16 01:53:59 +03:00
|
|
|
Link to other pages by linking to hashes of their page names:
|
2011-09-15 03:10:47 +03:00
|
|
|
|
|
|
|
``` html
|
|
|
|
<a href='#contact'>Contact</a>
|
2011-09-16 01:53:59 +03:00
|
|
|
<a href='#about'>About</a>
|
|
|
|
...
|
2011-09-15 03:10:47 +03:00
|
|
|
```
|
2011-09-16 01:53:59 +03:00
|
|
|
### Write other pages
|
2011-09-15 03:10:47 +03:00
|
|
|
|
2011-09-16 01:53:59 +03:00
|
|
|
Create content pages in the same directory as the container as `[page_name].html`
|
|
|
|
|
|
|
|
_i.e. about.html_
|
|
|
|
|
|
|
|
``` html
|
|
|
|
<h1>About us</h1>
|
|
|
|
<p>This is an about page!</p>
|
|
|
|
```
|
2011-09-15 03:10:47 +03:00
|
|
|
|
|
|
|
## Options
|
|
|
|
|
2011-09-16 02:17:44 +03:00
|
|
|
`pages` - an array of page names. _Required._
|
2011-09-15 03:10:47 +03:00
|
|
|
|
2011-10-13 05:51:42 +03:00
|
|
|
`default` - the page that is loaded on startup. _null is default (for an empty div)._
|
2011-09-15 03:10:47 +03:00
|
|
|
|
2011-10-13 05:51:42 +03:00
|
|
|
`animation` - the jQuery animation that is used to show pages, i.e. `fadeIn`, `show`, `slideUp`, `slideDown`. _`show` is default._
|
2011-09-15 03:10:47 +03:00
|
|
|
|
2011-10-13 05:51:42 +03:00
|
|
|
`animationSpeed` - the speed of the animation, i.e. `fast`, `slow`, 1000. _'normal' is default._
|
2011-09-15 03:10:47 +03:00
|
|
|
|
2011-10-13 05:51:42 +03:00
|
|
|
`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._
|
2011-09-17 08:06:31 +03:00
|
|
|
|
2011-09-15 03:10:47 +03:00
|
|
|
## Etc...
|
|
|
|
|
|
|
|
**Created by [@ChrisPolis](http://twitter.com/ChrisPolis)**
|
|
|
|
|
|
|
|
[MIT License](http://www.opensource.org/licenses/mit-license.php)
|
|
|
|
|