263 lines
9.9 KiB
HTML
263 lines
9.9 KiB
HTML
<!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) || "medium",
|
|
$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: "large",
|
|
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: "small",
|
|
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: "medium",
|
|
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"
|
|
})
|
|
.bindEvent("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);
|
|
Ox.Select({
|
|
id: "select",
|
|
items: [
|
|
{
|
|
checked: true,
|
|
id: "one",
|
|
title: "One"
|
|
},
|
|
{
|
|
id: "two",
|
|
title: "Two"
|
|
},
|
|
{
|
|
id: "three",
|
|
title: "Three"
|
|
}
|
|
]
|
|
}).addClass("margin").width(96).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> |