Adding javascript to HTML wireframes

Useful javascript snippets to help make html wireframes a bit more like an actual prototype than a wireframe.

The guys and Clearleft and New Bamboo developed a very nifty plugin called Polypage which can be grabbed here or here

and some interesting writeups on using it here and here
Talk on its use from the South by Southwest Conference

Simpler jQuery script I threw together to just show and hide components on a page, just set up the key : value pairs in var config


$(document).ready(function() {
  revealer = function() {
    var config = {
      '#reveal' : '#match',
      '#related' : '.tabs'
    }
    var Attacher = function(key, val) {
      var jqKey = $(key);
      var jqVal = $(val);
      jqVal.hide();
      jqKey.bind("click", function(evt) {
        jqVal.toggle();
        return false;
      })
      return false;
    }
    for (var key in config) {
      attach = new Attacher(key, config[key]);
    }
  }
  reveal = new revealer();
});

Category: Wireframing | Tags: , Comment »


Leave a Reply



Back to top