peterpunk / polypage forked from cheeaun/polypage

jQuery and MooTools plugin to ease the development of dynamic html wireframes with state.

This URL has Read+Write access

Merge commit 'andykent/master'
cheeaun (author)
Sat Mar 07 17:46:17 -0800 2009
commit  e757197087ff5b4dc588b45a948d3b5e9c730b57
tree    7e980f341480a834a9f4a35c07f123d53cdde250
parent  be4fa55f0d8d3dc4814bdbf8602f0fa75593159d parent  d668ac82afd21eb5f503badd2a8c4c0996aa3e56
readme.markdown

PolyPage

Polypage was designed to ease the process of showing multiple page states in html mock-ups. By simply adding class names to a document you can imply state and conditional view logic.

BASIC USAGE

$(document).ready(function() {
    $('body').polypage();
});

SETTINGS

There aren't many! It mostly just works.

Having said that feel free to modify the css styling to work with your wireframes. The initial jQuery collection (the 'body' element in these examples) is used to decide where the toggle bar is appended to in the source code.

If you want to force a state to be active when the page loads then you can pass it in as an Array to the init function like so...

$('body').polypage([ 'logged_in', 'admin' ]);

If you want to set a custom label it can be done using the label option like this...

$('body').polypage([], { label: 'My Label Here' });

If you wish to change the class prefix from 'pp' this is possible by setting the 'prefix' option...

$('body').polypage([], { prefix: 'MyPrefix' });
// class names should now look like "MyPrefix_logged_in_and_admin"

Even the whitespace separator can be changed using the 'separator' option (note only single characters work at the moment)...

$('body').polypage([], { separator: '-' });
// class names should now look like "pp-logged-in-and-admin"

Toggling states from the document is possible using various methods:

<a href="#logged_in">log in</a>
// and
<a href="#not_logged_in">log out</a>

// or inside a form
<form method="GET" action="#logged_in">
    <input type="submit">
</form>

// and from everywhere using: $.polypage.setState(String name, Boolean value)
<input type="checkbox" onchange="$.polypage.setState('logged_in', this.checked)">

MORE INFO

For more help and an example open the index.html file in a web browser.

If you would prefer be using MooTools instead of jQuery then for the moment you really should checkout cheeaun's fork http://github.com/cheeaun/polypage which contains lots of MooTools goodness.

COMING SOON

  • Keyboard shortcuts for toggling
  • A snazzy new toggle box design

CONTRIBUTERS