oxjs/demos/test/index.html

465 lines
19 KiB
HTML
Raw Normal View History

2010-01-07 20:21:07 +00:00
<!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>
2010-01-25 11:42:28 +00:00
<script type="text/javascript" src="../../build/js/jquery-1.4.js"></script>
2010-01-07 20:21:07 +00:00
<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",
2010-01-07 20:21:07 +00:00
$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)"
})*/;
2010-02-08 09:35:24 +00:00
var mainMenu = new Ox.MainMenu({
2010-02-19 10:57:19 +00:00
extras: [
new Ox.Input({
autocomplete: {
2010-02-19 14:19:48 +00:00
"Find: Title": [
"A bout de souffle",
"Casino",
"Diaries, Notes and Sketches",
"L'age d'or",
"Far From Heaven",
"In girum imus nocte et consumimur igni",
"It Felt Like a Kiss",
"Mulholland Dr.",
"Querelle",
"Vertigo"
],
2010-02-19 10:57:19 +00:00
"Find: Director": [
"Luis Buñuel",
"Adam Curtis",
"Guy Debord",
"Rainer Werner Fassbinder",
"Jean-Luc Godard",
"Todd Haynes",
"Alfred Hitchcock",
"David Lynch",
"Jonas Mekas",
"Martin Scorsese"
],
2010-02-19 14:19:48 +00:00
"Find: Country": [
"Austria",
"Canada",
"France",
"Germany",
"Italy",
"Japan",
"Spain",
"Swizerland",
"UK",
"USA"
2010-02-19 10:57:19 +00:00
]
},
clear: true,
highlight: true,
id: "find",
2010-02-19 14:19:48 +00:00
placeholder: ["Find: Title", "Find: Director", "Find: Country"],
2010-02-19 10:57:19 +00:00
}).width(256)
],
2010-02-08 09:35:24 +00:00
menus: [
{
id: "oxjs",
2010-02-08 14:42:00 +00:00
title: "Oxjs",
2010-02-08 09:35:24 +00:00
items: [
{ id: "about", title: "About" },
{},
{ id: "contact", title: "Contact"}
]
},
{
id: "file",
title: "File",
items: [
2010-02-08 09:45:48 +00:00
{ id: "load", keyboard: "control o", title: "Open" },
{ id: "save", keyboard: "control a", title: "Save" },
2010-02-08 14:42:00 +00:00
{ id: "save_as", keyboard: "shift control s", title: "Save As..."}
2010-02-08 09:35:24 +00:00
]
},
{
id: "edit",
title: "Edit",
items: [
2010-02-08 09:45:48 +00:00
{ id: "undo", keyboard: "control z", title: "Undo" },
{ id: "redo", keyboard: "shift control z", title: "Redo" },
2010-02-08 09:35:24 +00:00
{},
2010-02-08 09:45:48 +00:00
{ 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"},
2010-02-08 09:35:24 +00:00
{},
2010-02-08 09:45:48 +00:00
{ 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" },
2010-02-08 09:35:24 +00:00
]
},
{
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: [
2010-02-08 09:45:48 +00:00
{ id: "help", keyboard: "control h", title: "Help" }
2010-02-08 09:35:24 +00:00
]
}
],
size: "large"
});
2010-01-07 20:21:07 +00:00
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: [
{
2010-02-08 09:35:24 +00:00
element: mainMenu,
2010-01-07 20:21:07 +00:00
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")
2010-02-10 09:59:59 +00:00
$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" }
]
2010-01-07 20:21:07 +00:00
}).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",
2010-01-07 20:21:07 +00:00
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",
2010-01-07 20:21:07 +00:00
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({
2010-02-10 09:59:59 +00:00
buttons: [
{ id: "buttongroup0", value: "Button Group (0)" },
{ id: "buttongroup1", value: "Button Group (1)" },
{ id: "buttongroup2", value: "Button Group (2)" }
]
2010-01-07 20:21:07 +00:00
}).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({
2010-02-10 09:59:59 +00:00
buttons: [
{ id: "close", value: "close" },
{ id: "add", value: "add" },
{ id: "remove", value: "remove" }
],
2010-01-07 20:21:07 +00:00
selectable: true,
selected: 0,
size: "medium",
2010-01-07 20:21:07 +00:00
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)
2010-01-07 20:21:07 +00:00
.appendTo($toolbars[4]);
function update() {
2010-02-06 13:59:16 +00:00
//Ox.print("update", range.options("value"))
2010-01-07 20:21:07 +00:00
/*
// fixme: make this work
input.options({
value: range.options("value")
});
*/
input.val(range.options("value").toFixed(1))
}
2010-02-06 13:59:16 +00:00
//Ox.print("binding to OxRange" + range.id + "Change")
2010-01-07 20:21:07 +00:00
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);
2010-02-19 10:24:02 +00:00
Ox.Button({
selectable: true,
size: size,
type: "text",
value: "Bar"
}).addClass("margin").appendTo(mainPanel);
Ox.Select({
2010-02-06 08:23:42 +00:00
id: "select1",
items: [
{
checked: true,
id: "one",
title: "One"
},
{
id: "two",
title: "Two"
},
{
id: "three",
title: "Three"
}
]
}).addClass("margin").width(96).appendTo(mainPanel);
2010-02-06 08:23:42 +00:00
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);
2010-02-19 10:24:02 +00:00
Ox.Button({
selectable: true,
size: size,
type: "text",
value: "Foo"
}).addClass("margin").appendTo(mainPanel);
Ox.Button({
selectable: true,
size: size,
type: "text",
value: "Bar"
}).addClass("margin").appendTo(mainPanel);
2010-02-18 07:27:32 +00:00
Ox.Input({
2010-02-19 10:24:02 +00:00
autocomplete: {
City: [
"Albuquerque",
"Austin",
"Baltimore",
"Boston",
"Chicago",
"Cleveland",
"Dallas",
"Denver",
"Detroit",
"El Paso",
"Honululu",
"Houston",
"Kansas City",
"Las Vegas",
"Los Angeles",
"Memphis",
"Miami",
"Minneapolis",
"Nashville",
"New Orleans",
"New York",
"Oklahoma City",
"Philadelphia",
"Phoenix",
"Pittsburgh",
"Portland",
"San Antonio",
"San Diego",
"San Francisco",
"St. Louis",
"St. Paul",
"Seattle",
"Washington"
],
State: [
"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"
]
2010-02-18 07:27:32 +00:00
},
2010-02-19 10:24:02 +00:00
clear: true,
highlight: true,
id: "citystate",
2010-02-19 10:34:51 +00:00
placeholder: ["City", "State"],
selected: 1
}).addClass("margin").width(160).appendTo(mainPanel);
2010-01-07 20:21:07 +00:00
//*/
function switchTheme() {
if (Ox.theme() == "classic") {
Ox.theme("modern");
} else {
Ox.theme("classic");
}
}
function clickButton(val) {
2010-02-06 13:59:16 +00:00
// Ox.print(val);
2010-01-07 20:21:07 +00:00
}
});
</script>
</head>
<body></body>
</html>