oxjs/demos/test/index.html

596 lines
25 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>
2011-04-22 23:07:55 +00:00
<script type="text/javascript" src="../../build/js/OxUI.js"></script>
2010-01-07 20:21:07 +00:00
<script>
2011-04-22 23:07:55 +00:00
Ox.UI(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-20 08:29:03 +00:00
var loadingIcon = new Ox.LoadingIcon({
size: "medium"
})
.css({
marginLeft: "4px"
});
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-20 07:46:31 +00:00
"Find: All": [],
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",
2010-02-20 16:10:11 +00:00
"Switzerland",
2010-02-19 14:19:48 +00:00
"UK",
"USA"
2010-02-20 07:46:31 +00:00
],
"Find: Cinematographer": []
2010-02-19 10:57:19 +00:00
},
clear: true,
2010-02-19 14:55:10 +00:00
highlight: false,
2010-02-19 10:57:19 +00:00
id: "find",
2010-02-20 07:46:31 +00:00
label: ["Find: All", "Find: Title", "Find: Director", "Find: Country", "Find: Cinematographer"],
labelWidth: 96
2010-02-20 08:29:03 +00:00
}).width(320),
loadingIcon
2010-02-19 10:57:19 +00:00
],
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: "user",
title: "User",
items: [
{ disabled: true, id: "user", title: "User: not logged in"},
{},
{ id: "login", title: "Login" }
]
},
2010-02-08 09:35:24 +00:00
{
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-02-20 08:29:03 +00:00
Ox.Event.bind(null, "submit_find", function(data) {
loadingIcon.start();
setTimeout(function() {
loadingIcon.stop();
}, 5000);
});
var loginDialog = new Ox.Dialog({
buttons: [
[
{ value: "Register", click: function() { loginDialog.close(); } },
{ value: "Reset Password", click: function() { loginDialog.close(); } }
],
[
{ value: "Cancel", click: function() { loginDialog.close(); } },
{ value: "Login", click: function() { loginDialog.close(); } }
]
],
title: "Login"
});
Ox.Event.bind(null, "click_login", function() {
loginDialog.open();
});
2010-02-20 03:58:46 +00:00
var bottomPanel = Ox.Bar({size: "small"})
2010-01-07 20:21:07 +00:00
.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++) {
2010-02-20 03:58:46 +00:00
$toolbars[i] = Ox.Bar({size: i ? "medium" : "large"}).appendTo(mainPanel);
2010-01-07 20:21:07 +00:00
}
$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]);
2010-02-20 03:42:03 +00:00
Ox.Button({
size: "large",
type: "text",
value: "Open Dialog"
}).addClass("margin").click(openDialog).appendTo($toolbars[0]);
2010-01-07 20:21:07 +00:00
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]);
2010-02-26 15:52:36 +00:00
Ox.Input({
label: "Label",
2010-02-26 15:54:10 +00:00
labelWidth: 48,
2010-02-26 15:52:36 +00:00
size: size
}).addClass("margin").appendTo($toolbars[3]);
2010-01-07 20:21:07 +00:00
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 14:55:10 +00:00
clear: false,
2010-02-19 10:24:02 +00:00
highlight: true,
id: "citystate",
2010-02-19 10:34:51 +00:00
placeholder: ["City", "State"],
selected: 1
}).addClass("margin").width(160).appendTo(mainPanel);
2010-02-20 08:29:03 +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-26 13:22:27 +00:00
$("<br>").appendTo(mainPanel.$element);
$("<br>").appendTo(mainPanel.$element);
Ox.Input({
2010-02-27 08:16:58 +00:00
label: "Label"
}).width(400).addClass("margin").appendTo(mainPanel);
$("<br>").appendTo(mainPanel.$element);
$("<br>").appendTo(mainPanel.$element);
Ox.Input({
label: "Label",
//placeholder: "some\ntext",
2010-02-26 13:22:27 +00:00
type: "textarea"
2010-02-26 13:42:21 +00:00
}).width(400).height(100).addClass("margin").appendTo(mainPanel);
2010-02-27 08:46:49 +00:00
$("<br>").attr({clear: "all"}).appendTo(mainPanel.$element);
Ox.Select({
id: "selectLabel",
items: [
{
checked: true,
id: "label1",
title: "Label 1"
},
{
id: "label2",
title: "Label 2"
},
{
id: "label3",
title: "Label 3"
}
]
}).addClass("margin").width(104).appendTo(mainPanel);
Ox.Input().width(200).addClass("margin").appendTo(mainPanel);
$("<br>").attr({clear: "all"}).appendTo(mainPanel.$element);
Ox.Label({
title: "Label"
}).width(100).addClass("margin").appendTo(mainPanel);
Ox.Input().width(200).addClass("margin").appendTo(mainPanel);
$("<br>").attr({clear: "all"}).appendTo(mainPanel.$element);
Ox.Label({
title: "Label"
}).width(100).addClass("margin").appendTo(mainPanel);
Ox.Input({
type: "textarea"
}).width(200).height(100).addClass("margin").appendTo(mainPanel);
2010-01-07 20:21:07 +00:00
//*/
2010-02-20 03:42:03 +00:00
function openDialog() {
var $dialog = new Ox.Dialog({
title: "Dialog",
buttons: [
{
2010-02-20 04:26:53 +00:00
value: "Switch Theme",
click: switchTheme
2010-02-20 03:42:03 +00:00
},
{
value: "Close",
click: function() {
$dialog.close();
}
}
]
})
.append($.map(Ox.range(100), function(v, i) {
return "Line #" + (i + 1)
}).join("<br/>"))
.open();
}
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>
2011-04-22 23:07:55 +00:00
</html>