<!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 mainMenu = new Ox.MainMenu({
menus: [
{
id: "oxjs",
title: "Oxjs",
items: [
{ id: "about", title: "About" },
{},
{ id: "contact", title: "Contact"}
]
},
{
id: "file",
title: "File",
items: [
{ id: "load", keyboard: "control o", title: "Open" },
{ id: "save", keyboard: "control a", title: "Save" },
{ id: "save_as", keyboard: "shift control s", title: "Save As..."}
]
},
{
id: "edit",
title: "Edit",
items: [
{ id: "undo", keyboard: "control z", title: "Undo" },
{ id: "redo", keyboard: "shift control z", title: "Redo" },
{},
{ id: "cut", keyboard: "control x", title: "Cut" },
{ id: "copy", keyboard: "control c", title: "Copy" },
{ id: "paste", keyboard: "control v", title: "Paste"},
{ id: "delete", keyboard: "delete", title: "Delete"},
{},
{ id: "select_all", keyboard: "control a", title: "Select All" },
{ id: "select_none", keyboard: "shift control a", title: "Select None" },
{ id: "invert_selection", keyboard: "alt control a", title: "Invert Selection" },
]
},
{
id: "sort",
title: "Sort",
items: [
{ id: "sort_movies", title: "Sort Movies by", items: [
{ checked: true, group: "sort_movies", id: "title", title: "Title"},
{ checked: false, group: "sort_movies", id: "director", title: "Director" },
] },
{ id: "order_movies", title: "Order Movies", items: [
{ checked: false, group: "order_movies", id: "ascending", title: "Ascending"},
{ checked: true, group: "order_movies", id: "descending", title: "Descending" },
] }
]
},
{
id: "help",
title: "Help",
items: [
{ id: "help", keyboard: "control h", title: "Help" }
]
}
],
size: "large"
});
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: mainMenu,
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 = new Ox.Tabbar({
selected: 0, // fixme: should not be necessary
tabs: [
{ id: "documentation", value: "Documentation" },
{ id: "demo", value: "Demo" },
{ id: "source_code", value: "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({
buttons: [
{ id: "buttongroup0", value: "Button Group (0)" },
{ id: "buttongroup1", value: "Button Group (1)" },
{ id: "buttongroup2", value: "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({
buttons: [
{ id: "close", value: "close" },
{ id: "add", value: "add" },
{ id: "remove", value: "remove" }
],
selectable: true,
selected: 0,
size: "medium",
type: "image",
}).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() {
//Ox.print("update", range.options("value"))
/*
// fixme: make this work
input.options({
value: range.options("value")
});
*/
input.val(range.options("value").toFixed(1))
}
//Ox.print("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: "select1",
items: [
{
checked: true,
id: "one",
title: "One"
},
{
id: "two",
title: "Two"
},
{
id: "three",
title: "Three"
}
]
}).addClass("margin").width(96).appendTo(mainPanel);
Ox.Select({
id: "select2",
items: [
{
checked: true,
id: "four",
title: "Four"
},
{
id: "five",
title: "Five"
},
{
id: "six",
title: "Six"
}
]
}).addClass("margin").width(96).appendTo(mainPanel);
Ox.Input({
id: "state",
autocomplete: function(value, callback) {
value = value.toLowerCase();
var items = [];
states = [
"Alabama", "Alaska", "Arizona", "Arkansas", "California",
"Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois", "Indiana",
"Iowa", "Kansas", "Kentucky", "Louisiana", "Maine",
"Maryland", "Massachusetts", "Michigan", "Minnessota", "Mississippi",
"Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota",
"Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island",
"South Carolina", "South Dakota", "Tennessee", "Texas", "Utah",
"Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin",
"Wyoming"
];
if (value === "") {
items = states;
} else {
$.each(states, function(i, state) {
if (state.toLowerCase().indexOf(value) > -1) {
items.push(state);
}
});
}
callback(items);
},
placeholder: "State"
}).addClass("margin").width(96).appendTo(mainPanel);
//*/
function switchTheme() {
if (Ox.theme() == "classic") {
Ox.theme("modern");
} else {
Ox.theme("classic");
}
}
function clickButton(val) {
// Ox.print(val);
}
});
</script>
</head>
<body></body>
</html>