matomowp/demosite
2
0
Fork 0
Code Pull requests Releases Activity

added demo pages

Browse source
This commit is contained in:
Chris Polis 2011-09-14 18:32:56 -07:00
parent 831ece4771
commit 6c95f77553
4 changed files with 82 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
demo/about.html Normal file
View file

@ -0,0 +1,18 @@
<h2>What?</h2>
Pagify is a simple jQuery plugin that simply replaces the contents of a div with content from other html files.
<h2>Why?</h2>
Pagify does nothing that couldn't be done before with good 'ol jQuery.<br />
It does however, provide the following advantages:<br />
<ul>
<li><strong>Easy:</strong> Pagify can be setup with only a few lines of code. </li>
<li><strong>Clean:</strong> Seperate your HTML files.</li>
<li><strong>DRY:</strong> Options are used to allow for customization and need to only be changed in one place.</li>
<li><strong>Configurable:</strong> Pagify uses CoC where it makes sense and leaves the rest up to you.</li>
</ul>
I created Pagify because I noticed that my code for single page sites was getting ugly and I was repeating myself alot.
<h2>Who?</h2>
Created by <a href='http://twitter.com/ChrisPolis'>@ChrisPolis</a>
...and you - <a href='https://github.com/cmpolis/Pagify'>Fork me on GitHub!</a>

20
demo/index.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Pagify.js Demo</title>
</head>
<body>
<header>
<h1>Pagify.js<small>A jQuery plugin for single page web sites</small></h1>
<nav>
<a href='#about'>About</a>
<a href='#usage'>Usage</a>
<a href='#options'>Options</a>
</nav>
</header>
<div id='page_holder' />
</body>
</html>

17
demo/options.html Normal file
View file

@ -0,0 +1,17 @@
<ul>
<li>
<strong>pages</strong> - an array of page names
</li>
<li>
<strong>default</strong> - the page that is loaded by default or 'empty' for an empty div
</li>
<li>
<strong>animation</strong> - the jQuery animation that is used to show pages, i.e. fadeIn, show, slideUp, slideDown. show is used by default.
</li>
<li>
<strong>cache</strong> - true or false. Determines if all pages are loaded upfront or not. false by default.
</li>
</ul>

27
demo/usage.html Normal file
View file

@ -0,0 +1,27 @@
<ul>
<li>
Load Pagify and jQuery:
<pre>
&lt;script src="jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="pagify.js" type="text/javascript"&gt;&lt;/script&gt;
</pre>
</li>
<li>
Attach a div that will hold the content of each page by listing pages and options:
<pre>
$('#page_holder').pagify({
pages: ['home', 'about', 'contact'],
default: 'home' // The name of a page or 'empty'
});
</pre>
</li>
<li>
Show other pages by linking to hashes:
<pre>
&lt;a href='#contact'&gt;Contact&lt;/a&gt;
</pre>
</li>
</ul>