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">[email protected]</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!