JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
README.rdoc
jquery.protoparts.js

README.rdoc

Enhancing your prototyped websites

Protoparts is a jQuery plugin that lets you toggle regions in your prototype, showing the same page in different states.

The demo explains it best: thinkcreate.github.com/jquery_protoparts

Installation

Insert a style tag into the head of a HTML document:

<link href="http://github.com/thinkcreate/jquery_protoparts/raw/master/css/protoparts.css" media="all" rel="stylesheet" type="text/css" />

<style type="text/css" media="all"> 
    .is { display: none; }
</style>

Below the style include, include the javascript. Lets start with the required libraries (jquery and jquery.cookies):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://cookies.googlecode.com/svn/trunk/jquery.cookies.js" type="text/javascript"></script>

The plugin itself:

<script type="text/javascript" src="http://github.com/thinkcreate/jquery_protoparts/raw/master/jquery.protoparts.js"></script>

Init the script by placing this somewhere in the page:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("html").protoparts();
  });
</script>

Get busy

Now lets prototype what it looks like when someone is logged-in. Add the following snippet to your page:

<div id="header">
  <div class="logged_in is false">
    <a href="/login">login</a>
    |
    <a href="/register">register</a>
  </div>

  <div class="logged_in is true">
    <a href="/profile">gert@thinkcreate.nl</a>
    |
    <a href="/account">account</a>
  </div>
</div> <!-- /#header -->

The login part we just added has two states, true and false. The states will show up in the toolbar and we'll now be able to wander through the site as a logged-in user!

Meta

Created by Gert Goet

github.com/thinkcreate/jquery_protoparts

Released under the MIT License: www.opensource.org/licenses/mit-license.php

Enjoy!