oxjstmp/demos/test/index.html

545 lines
23 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 loadingIcon = new Ox.LoadingIcon({
size: "medium"
})
.css({
marginLeft: "4px"
});
var mainMenu = new Ox.MainMenu({
extras: [
new Ox.Input({
autocomplete: {
"Find: All": [],
"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"
],
"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"
],
"Find: Country": [
"Austria",
"Canada",
"France",
"Germany",
"Italy",
"Japan",
"Spain",
"Swizerland",
"UK",
"USA"
],
"Find: Cinematographer": []
},
clear: true,
highlight: false,
id: "find",
label: ["Find: All", "Find: Title", "Find: Director", "Find: Country", "Find: Cinematographer"],
labelWidth: 96
}).width(320),
loadingIcon
],
menus: [
{
id: "oxjs",
title: "Oxjs",
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" }
]
},
{
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"
});
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();
});
var bottomPanel = Ox.Bar({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.Bar({size: i ? "medium" : "large"}).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: "large",
type: "text",
value: "Open Dialog"
}).addClass("margin").click(openDialog).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.Button({
selectable: true,
size: size,
type: "text",
value: "Bar"
}).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.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);
Ox.Input({
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"
]
},
clear: false,
highlight: true,
id: "citystate",
placeholder: ["City", "State"],
selected: 1
}).addClass("margin").width(160).appendTo(mainPanel);
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);
//*/
function openDialog() {
var $dialog = new Ox.Dialog({
title: "Dialog",
buttons: [
{
value: "Switch Theme",
click: switchTheme
},
{
value: "Close",
click: function() {
$dialog.close();
}
}
]
})
.append($.map(Ox.range(100), function(v, i) {
return "Line #" + (i + 1)
}).join("<br/>"))
.open();
}
function switchTheme() {
if (Ox.theme() == "classic") {
Ox.theme("modern");
} else {
Ox.theme("classic");
}
}
function clickButton(val) {
// Ox.print(val);
}
});
</script>
</head>
<body></body>
</html>