Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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:


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

<link href="" media="all" rel="stylesheet" type="text/css" />

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

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

<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>

The plugin itself:

<script type="text/javascript" src=""></script>

Init the script by placing this somewhere in the page:

<script type="text/javascript" charset="utf-8">

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 class="logged_in is true">
    <a href="/profile"></a>
    <a href="/account">account</a>
</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!


Created by Gert Goet

Released under the MIT License: