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

added style to demo and updated demo pages content

Browse source
This commit is contained in:
Chris Polis 2011-09-15 17:07:48 -07:00
parent 47b7013805
commit 08bd042d6a
5 changed files with 78 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
demo/about.html
View file

@ -5,12 +5,14 @@ Pagify is a simple jQuery plugin that simply replaces the contents of a div with
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>
<li><b>Simple</b> - include pagify.js, create a div, make one jQuery call and you're done!</li>
<li><b>Lightweight</b> - pagify.js is far less than 100 lines of code, well commented and easy to understand and extend!</li>
<li><b>Flexible</b> - Get started by only specifying a list of pages or customize animations, default pages and caching!</li>
<li><b>Fast</b> - Load all pages upfront or load on the fly; a simple $.get() is used to get content with minimal proccessing!</li>
<li><b>Clean</b> - Replace long HTML files broken up into sections and verbose JS to do the simple task of switching content!</li>
<li><b>Couldn't find an adjective...</b> - Uses only Javascript and HTML so it can be uploaded like any other static site!</li>
</ul>
I created Pagify because I noticed that my code for single page sites was getting ugly and I was repeating myself alot.
I created Pagify because I noticed that my code for single page sites was getting ugly and I was reusing most of the jQuery code for page switching.
<h2>Who?</h2>
Created by <a href='http://twitter.com/ChrisPolis'>@ChrisPolis</a>

4
demo/index.html
View file

@ -3,6 +3,8 @@
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../pagify.js" type="text/javascript"></script>
@ -21,6 +23,7 @@
</head>
<body>
<div id='container'>
<header>
<h1>Pagify.js<small>A jQuery plugin for single page web sites</small></h1>
<nav>
@ -31,5 +34,6 @@
</header>
<div id='page_holder' />
</div>
</body>
</html>

8
demo/options.html
View file

@ -1,17 +1,17 @@
<ul>
<li>
<strong>pages</strong> - an array of page names
<b>pages</b> - an array of page names. Required.
</li>
<li>
<strong>default</strong> - the page that is loaded by default or null for an empty div
<b>default</b> - the page that is loaded by default or null 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.
<b>animation</b> - 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.
<b>cache</b> - true or false. Determines if all pages are loaded upfront or not. false by default.
</li>
</ul>

25
demo/style.css Normal file
View file

@ -0,0 +1,25 @@
body {
background-color: #355664;
color: #FCFCFC;
font-family: Arial,Helvetica,sans-serif;
}
h1 {
font-size: 40px;
}
h1 small {
font-size: 20px;
}
nav {
font-size: 20px;
}
a{
color: #FCFCFC;
text-decoration: none;
}
a:hover {
color: #333;
}
#container {
margin: 0 auto;
width: 960px;
}

63
demo/usage.html
View file

@ -1,27 +1,40 @@
<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>
View the source of this demo <a href="https://github.com/cmpolis/Pagify/tree/master/demo">here</a>. Or...
<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>
<h3>Create a <em>container</em> page:</h3>
<p>Load Pagify and jQuery:</p>
<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>
<p>Create a div that will contain page content:</p>
<pre>&lt;div id='page_holder' /&gt;</pre>
<li>
Show other pages by linking to hashes:
<pre>
&lt;a href='#contact'&gt;Contact&lt;/a&gt;
</pre>
</li>
</ul>
<p>Call <strong>pagify</strong> on the aforementioned div and pass in options. <em>The only required option is <code>pages</code>.</em></p>
<pre>$('#page_holder').pagify({
pages: ['home', 'about', 'contact'],
default: 'home' // The name of a page or null for an empty div
});
</pre>
<p>Link to other pages by linking to hashes of their page names:</p>
<pre>&lt;a href='#contact'&gt;Contact&lt;/a&gt;
&lt;a href='#about'&gt;About&lt;/a&gt;
...
</pre>
<h3>Write other pages</h3>
<p>Create content pages in the same directory as the container as <code>[page_name].html</code></p>
<p><em>i.e. about.html</em></p>
<pre>&lt;h1&gt;About us&lt;/h1&gt;
&lt;p&gt;This is an about page!&lt;/p&gt;
</pre>