<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
<style>
input {
//float: left;
//margin: 4px 0 4px 0;
}
.top {
margin: 4px;
font-family: Monaco, Consolas;
font-size: 16px;
line-height: 16px;
}
.bottom {
margin: 7px;
font-family: Monaco, Consolas;
font-size: 10px;
line-height: 10px;
}
.margin {
float: left;
margin: 4px 2px 4px 2px;
}
.padding {
float: left;
margin: 4px 0 4px 0;
padding: 0 4px 0 4px;
}
</style>
<script type="text/javascript" src="../../build/js/jquery-1.4.js"></script>
<script type="text/javascript" src="../../build/js/ox.js"></script>
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
<script>
$(function() {
var size = window.location.hash.substr(1) || "small",
$body = $("body"),
$toolbars = [];
var sidePanel = new Ox.Panel();
var mainPanel = new Ox.Panel().css({
//borderLeft: "1px solid rgb(160, 160, 160)"
});
var middleSplitPanel = Ox.SplitPanel({
elements: [
{
element: sidePanel,
size: 256
},
{
element: mainPanel
}
],
orientation: "horizontal"
})/*.css({
borderTop: "1px solid rgb(160, 160, 160)",
borderBottom: "1px solid rgb(160, 160, 160)"
})*/;
var topPanel = Ox.Toolbar({size: "small"})
.css({
zIndex: 2,
MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
})
.append(
$("<div/>")
.addClass("top")
.html("Ox.js")
);
var bottomPanel = Ox.Toolbar({size: "small"})
.css({
zIndex: 2,
MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
})
.append(
$("<div/>")
.addClass("bottom")
.html("Ox.js - A JavaScript Library for Web Applications")
);
var mainSplitPanel = Ox.SplitPanel({
elements: [
{
element: topPanel,
size: 24
},
{
element: middleSplitPanel
},
{
element: bottomPanel,
size: 24
}
],
orientation: "vertical"
}).appendTo($body);
var oxjsPanel = new Ox.CollapsePanel({
title: "ox.js"
}).appendTo(sidePanel);
oxjsPanel.$content.html("Core<br/>Array/Object<br/>Color<br/>Date<br/>Format<br/>Math<br/>String<br/>Type").click(function() {$(this).append("<div>foo</div>")})
var oxdatajsPanel = new Ox.CollapsePanel({
title: "ox.data.js"
}).appendTo(sidePanel);
oxdatajsPanel.$content.html("HTML<br/>ISO<br/>Unicode")
var oxuijsPanel = new Ox.CollapsePanel({
title: "ox.ui.js"
}).appendTo(sidePanel);
oxuijsPanel.$content.html("Core<br/>Bars<br/>Forms<br/>Panels")
$tabbar = Ox.Tabbar({
values: ["Documentation", "Demo", "Source Code"]
}).appendTo(mainPanel);
for (var i = 0; i < 5; i++) {
$toolbars[i] = Ox.Toolbar({size: i ? "small" : "medium"}).appendTo(mainPanel);
}
$toolbars[5] = Ox.Bar({size: 24}).appendTo(mainPanel);
Ox.Button({
size: "medium",
type: "text",
value: "Switch Theme"
}).addClass("margin").click(switchTheme).appendTo($toolbars[0]);
Ox.Button({
size: size,
type: "text",
value: "Button"
}).addClass("margin").appendTo($toolbars[1]);
///*
Ox.Button({
size: "xsmall",
type: "text",
value: ['Button, value=["foo", "bar"] (foo)', 'Button, value=["foo", "bar"] (bar)']
}).addClass("margin").css({width: "256px"}).appendTo($toolbars[1]);
//*/
Ox.Button({
selectable: true,
size: size,
type: "text",
value: "Button, selectable=true"
}).addClass("margin").appendTo($toolbars[1]);
Ox.ButtonGroup({
values: ["Button Group (0)", "Button Group (1)", "Button Group (2)"]
}).addClass("padding").appendTo($toolbars[1]);
$.each(["close", "add", "remove", ["play", "pause"]], function(i, v) {
Ox.Button({
size: size,
type: "image",
value: v
})
.addClass("margin")
.mousedown(function() {
clickButton($(this).val())
})
.appendTo($toolbars[2]);
});
///*
Ox.Button({
size: size,
type: "text",
value: "Enabled"
}).addClass("margin").appendTo($toolbars[2]);
Ox.Button({
disabled: true,
size: size,
type: "text",
value: "Disabled"
}).addClass("margin").appendTo($toolbars[2]);
//*/
Ox.ButtonGroup({
selectable: true,
selected: 0,
size: "small",
type: "image",
values: ["close", "add", "remove"]
}).addClass("padding").appendTo($toolbars[2]);
///*
Ox.Input({
placeholder: "Placeholder",
size: size
}).addClass("margin").appendTo($toolbars[3]);
var range = Ox.Range({
max: 10,
min: 0,
size: 200,
step: 0.1,
value: 0
}).addClass("margin").appendTo($toolbars[4])
var input = Ox.Input({
value: 0
})
.addClass("margin")
.css({
width: "32px"
})
.subscribe("change." + range.id, update)
.appendTo($toolbars[4]);
function update() {
//console.log("update", range.options("value"))
/*
// fixme: make this work
input.options({
value: range.options("value")
});
*/
input.val(range.options("value").toFixed(1))
}
//console.log("binding to OxRange" + range.id + "Change")
Ox.Range({
animate: true,
arrows: true,
max: 300,
min: 100,
size: 202,
step: 100,
thumbValue: true,
trackImages: ["png/r.png", "png/g.png", "png/b.png"],
value: 100
}).addClass("margin").appendTo($toolbars[4])
Ox.Button({
selectable: true,
size: size,
type: "text",
value: "Foo"
}).addClass("margin").appendTo(mainPanel);
//*/
function switchTheme() {
if (Ox.theme() == "classic") {
Ox.theme("modern");
} else {
Ox.theme("classic");
}
}
function clickButton(val) {
// console.log(val);
}
});
</script>
</head>
<body></body>
</html>