forked from 0x2620/oxjs
add test browser
This commit is contained in:
rolux
parent
698d57abb0
commit
a58350a29e
15 changed files with 160 additions and 1751 deletions
|
|
@ -1,595 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>OxJS Test Demo</title>
|
||||
<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/OxUI.js"></script>
|
||||
<script>
|
||||
Ox.UI(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",
|
||||
"Switzerland",
|
||||
"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]);
|
||||
Ox.Input({
|
||||
label: "Label",
|
||||
labelWidth: 48,
|
||||
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);
|
||||
$("<br>").appendTo(mainPanel.$element);
|
||||
$("<br>").appendTo(mainPanel.$element);
|
||||
Ox.Input({
|
||||
label: "Label"
|
||||
}).width(400).addClass("margin").appendTo(mainPanel);
|
||||
$("<br>").appendTo(mainPanel.$element);
|
||||
$("<br>").appendTo(mainPanel.$element);
|
||||
Ox.Input({
|
||||
label: "Label",
|
||||
//placeholder: "some\ntext",
|
||||
type: "textarea"
|
||||
}).width(400).height(100).addClass("margin").appendTo(mainPanel);
|
||||
$("<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);
|
||||
//*/
|
||||
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>
|
||||
<script type="text/javascript" src="../../build/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/test.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue