2011-01-25 07:42:20 +00:00
<!doctype html>
< head >
< title > GUI-DAT< / title >
2011-01-25 08:14:24 +00:00
2011-01-25 22:16:30 +00:00
< link rel = "icon" type = "image/gif" href = "demo/assets/favicon.gif" >
2011-01-25 08:14:24 +00:00
2011-01-25 07:42:20 +00:00
< link href = "gui.css" media = "screen" rel = "stylesheet" type = "text/css" / >
2011-01-25 22:16:30 +00:00
< link href = "demo/demo.css" media = "screen" rel = "stylesheet" type = "text/css" / >
2011-01-25 07:42:20 +00:00
< script type = "text/javascript" src = "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" > < / script >
2011-01-24 22:08:48 +00:00
2011-01-25 07:42:20 +00:00
< script type = "text/javascript" src = "gui.js" > < / script >
2011-01-25 08:28:18 +00:00
< script type = "text/javascript" src = "controllers/slider.js" > < / script >
2011-01-25 08:26:18 +00:00
< script type = "text/javascript" src = "controllers/controller.js" > < / script >
< script type = "text/javascript" src = "controllers/controller.string.js" > < / script >
< script type = "text/javascript" src = "controllers/controller.number.js" > < / script >
< script type = "text/javascript" src = "controllers/controller.boolean.js" > < / script >
< script type = "text/javascript" src = "controllers/controller.function.js" > < / script >
2011-01-26 02:30:05 +00:00
< script type = "text/javascript" src = "demo/demo.js" > < / script >
2011-01-26 00:07:51 +00:00
< script type = "text/javascript" >
2011-01-25 07:42:20 +00:00
var controllableObject =
{
numberProperty: 20,
constrainedNum: 0,
2011-01-25 09:35:45 +00:00
notchedNum: 240,
2011-01-26 00:07:51 +00:00
pageTitle: "gui-dat",
2011-01-25 07:42:20 +00:00
anotherTextProperty: "another string",
booleanProperty: false,
anotherBooleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
};
2011-01-26 02:30:05 +00:00
2011-01-25 07:42:20 +00:00
window.onload = function() {
2011-01-26 00:07:51 +00:00
2011-01-26 02:30:05 +00:00
var testDisplay = new DynamicText("gui-dat", 500, 100, 80);
2011-01-25 07:42:20 +00:00
prettyPrint();
2011-01-24 10:36:57 +00:00
2011-01-25 07:42:20 +00:00
GUI.start();
2011-01-26 00:58:52 +00:00
2011-01-25 07:42:20 +00:00
// Creates a number box
GUI.add(controllableObject, "numberProperty");
2011-01-26 00:07:51 +00:00
2011-01-25 07:42:20 +00:00
// Creates a slider (min, max)
2011-01-26 02:15:20 +00:00
GUI.add(controllableObject, "constrainedNum", -100, 100);
2011-01-26 00:07:51 +00:00
2011-01-25 09:35:45 +00:00
// Creates a slider with notches
2011-01-26 00:58:52 +00:00
GUI.add(controllableObject, "notchedNum", 0, 800, 100);
2011-01-26 00:07:51 +00:00
2011-01-25 07:42:20 +00:00
// Creates a text field
2011-01-26 03:14:15 +00:00
GUI.add(testDisplay, "message");
2011-01-26 00:07:51 +00:00
2011-01-25 07:42:20 +00:00
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
2011-01-26 00:07:51 +00:00
2011-01-25 07:42:20 +00:00
// Creates a button
GUI.add(controllableObject, "functionProperty")
.setName("Fire a Function");
2011-01-26 00:07:51 +00:00
2011-01-25 07:42:20 +00:00
};
< / script >
< / head >
< body >
2011-01-26 03:14:15 +00:00
< h1 > < a href = "http://twitter.com/guidat" > < img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" / > < / a > < span id = "helvetica-demo" > < / span > < / h1 >
2011-01-26 02:30:05 +00:00
< div id = "helvetica-test" > < / div >
2011-01-25 09:05:49 +00:00
< p >
2011-01-26 01:55:59 +00:00
< strong > gui-dat< / strong > is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
2011-01-25 09:05:49 +00:00
< / p >
2011-01-26 00:07:51 +00:00
2011-01-26 02:15:20 +00:00
< p > • < a href = "#" > < strong > Download the minified source< / strong > < / a > < small > [2.3kb]< / small > < br / >
• < a href = "http://github.com/jonobr1/GUI-DAT" > Contribute on GitHub!< / a > < / p >
2011-01-26 01:55:59 +00:00
< h2 > Basic Usage< / h2 >
2011-01-25 07:42:20 +00:00
< pre id = "demo-pre" class = "prettyprint" >
2011-01-26 01:55:59 +00:00
< script type=" text/javascript" src=" gui.min.js" > < /script>
< script type=" text/javascript" >
2011-01-24 10:36:57 +00:00
var controllableObject =
{
2011-01-25 09:35:45 +00:00
numberProperty: 20,
constrainedNum: 0,
notchedNum: 240,
2011-01-26 01:55:59 +00:00
textProperty: " a string" ,
anotherTextProperty: " another string" ,
2011-01-25 09:35:45 +00:00
booleanProperty: false,
anotherBooleanProperty: false,
functionProperty: function() {
2011-01-26 01:55:59 +00:00
alert(" I am a function!" );
2011-01-25 09:35:45 +00:00
}
2011-01-24 10:36:57 +00:00
};
window.onload = function() {
GUI.start();
2011-01-26 02:15:20 +00:00
2011-01-24 10:36:57 +00:00
// Creates a number box
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, " numberProperty" );
2011-01-25 07:42:20 +00:00
2011-01-24 10:36:57 +00:00
// Creates a slider (min, max)
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, " constrainedNum" , -100, 100)
2011-01-25 09:35:45 +00:00
// Creates a slider with notches
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, " notchedNum" , 0, 800, 100)
2011-01-25 07:42:20 +00:00
2011-01-24 10:36:57 +00:00
// Creates a text field
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, " textProperty" );
2011-01-25 07:42:20 +00:00
2011-01-24 10:36:57 +00:00
// Creates a checkbox
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, " booleanProperty" );
2011-01-25 07:42:20 +00:00
2011-01-24 10:36:57 +00:00
// Creates a button
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, " functionProperty" )
.setName(" Fire a Function" );
2011-01-24 10:36:57 +00:00
};
2011-01-26 01:55:59 +00:00
< /script> < / pre >
2011-01-26 02:15:20 +00:00
< footer >
2011-01-25 09:05:49 +00:00
By < a href = "http://georgemichaelbrower.com/" > George Michael Brower< / a > , < a href = "http://jonobr1.com/" > Jono Brandel< / a > , and < a href = "http://github.com/jonobr1/GUI-DAT" > you< / a > .
2011-01-26 02:15:20 +00:00
< / footer >
2011-01-25 07:42:20 +00:00
< / body >
2011-01-23 21:23:53 +00:00
< / html >
