Skip to content

Instantly share code, notes, and snippets.

@mowen
Created August 8, 2010 11:58
Show Gist options
  • Save mowen/513947 to your computer and use it in GitHub Desktop.
Save mowen/513947 to your computer and use it in GitHub Desktop.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Prototype</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" language="javascript" src="nassi-shneiderman.js"></script>
<style type="text/css">
.block { border: 1px solid #000; text-align: center; }
ul.options { list-style-type: none; }
.options li { display: inline; margin: 2em; }
</style>
<script type="text/javascript">
$(document).ready(function() {
var html = Qire.RetryProfile.render(
new Block(1,
'Sub to determine Wiki-article.',
'Select favourite genre',
[ new Option('History', 2),
new Option('Science', 3),
new Option('Geography', 4),
new Option('Other', 5) ]),
new Block(2,
'Click history link',
'',
[]),
new Block(3,
'Click the science link',
'',
[]),
new Block(4,
'Click the Geography link',
'Select a country',
[ new Option('England', 6),
new Option('France', 6),
new Option('Germany', 6) ]),
new Block(6,
'Move there',
'',
[])
);
$('.demo').prepend(html);
$('.block')
.mouseenter(function (event) {
event.stopPropagation();
$(event.currentTarget).animate({ width: '+=50',
height: '+=50',
fontSize: '+=2' }, 'fast');
})
.mouseleave(function (event) {
event.stopPropagation();
$(event.currentTarget).animate({ width: '-=50',
height: '-=50',
fontSize: '-=2' }, 'fast');
});
});
</script>
</head>
<body>
<div class="demo">
</div>
</body>
</html>
/**
* Blocks should only be added via a function in Qire.RetryProfile so that they can
* be registered automatically. The render method should take a parameter which
* contains details of the parent, so that the parameters can be used in the option.
*/
var Qire = {};
Qire.RetryProfile = function () {
var blocks = {};
return {
render: function(process) {
return process.render();
},
registerBlock: function (block) {
blocks[block.id] = block;
},
getBlock: function(id) {
return blocks[id];
}
};
}();
function Block(id, title, label, options) {
this.id = id;
this.title = title;
this.label = label;
this.options = options;
Qire.RetryProfile.registerBlock(this);
}
Block.prototype = {
_renderOptions: function() {
var html = '';
for (var option in this.options) {
html += this.options[option].render();
}
return html;
},
render: function() {
return '<div class="block">' +
'<h3>' + this.title + '</h3>' +
'<p>' + this.label + '</p>' +
'<table class="options">' + this._renderOptions() + '</table>' +
'</div>';
}
};
function Option(label, outcome) {
this.label = label;
this.outcome = outcome;
}
Option.prototype = {
render: function() {
return '<tr class="option"><td>' + this.label + '</td>' +
'<td>' + this._renderOutcome() + '</td>' +
'</tr>';
},
_renderOutcome: function() {
var outcomeBlock = Qire.RetryProfile.getBlock(this.outcome);
return (outcomeBlock !== undefined) ? outcomeBlock.render() : '';
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment