HTML and CSS Reference
In-Depth Information
function initUI() {
$( "#action-zoom" ).button({
icons: {
primary: "ui-icon-zoomin"
}
}).click(function(){
if (app.camera.scale == 1.0)
app.camera.scale = 1.5;
else app.camera.scale = 1.0;
app.redraw();
return false;
});
$( "#tool-cursor" ).click(function() {
app.main.tool = 0;return false;
}).next().next().click(function() {
app.main.tool = 1;return false;
}).parent().buttonset();
$("#builder-dialog").dialog({dialogClass: "build_dialog", width:320, height:300,
minWidth:240, minHeight: 200, position: [20, 60], resize: function() { app.builder.redraw(); }});
}
</script>
<style>
#toolbar { padding: 4px; display: inline-block;position: absolute; left: 20px; top: 20px; }
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
#builder { }
.build_dialog .ui-dialog-content { padding: 0; overflow: hidden }
.build_dialog .ui-dialog-titlebar-close { display:none }
</style>
</head>
<body>
<canvas id="screen" border="0"></canvas>
<div id="toolbar" class="ui-widget-header ui-corner-all">
<span id="tool">
<input type="radio" id="tool-cursor" name="tool" checked="checked" /><label
for="tool-cursor">Cursor</label>
<input type="radio" id="tool-brush" name="tool" /><label for="tool-brush">Brush</label>
</span>
<button id="action-zoom">Zoom</button>
</div>
<div id="builder-dialog" title="Select a tile">
<canvas id="builder"></canvas>
</div>
</body>
</html>
