0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add more examples

Browse source
This commit is contained in:
rolux 2012-04-15 14:13:37 +02:00
parent c72031bfdf
commit c7e89cf73a
6 changed files with 128 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
examples/json_to_list/css/example.css Normal file
View file

@ -0,0 +1,7 @@
.OxTreeList {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}

13
examples/json_to_list/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>JSON to List</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
<link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script>
</head>
<body>
</body>
</html>

13
examples/json_to_list/js/example.js Normal file
View file

@ -0,0 +1,13 @@
/*
This is probably the easiest way of displaying a complex data structure...
*/
Ox.load('UI', function() {
Ox.getJSON(Ox.PATH + '/Ox.Geo/json/Ox.Geo.json', function(data) {
Ox.TreeList({data: data}).appendTo(Ox.$body);
});
});

13
examples/symbols/css/example.css Normal file
View file

@ -0,0 +1,13 @@
.OxButtonGroup {
margin: 4px;
}
.buttons {
height: 64px;
}
.symbol {
float: left;
width: 256px;
height: 256px;
border: 1px solid rgb(208, 208, 208);
margin: 8px;
}

13
examples/symbols/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Symbols</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
<link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script>
</head>
<body>
</body>
</html>

69
examples/symbols/js/example.js Normal file
View file

@ -0,0 +1,69 @@
/*
...
*/
Ox.load('UI', function() {
Ox.$body.css({margin: '8px', overflowY: 'scroll'});
var groups = [
['add', 'remove', 'close', 'center', 'bracket'],
['arrowLeft', 'arrowRight', 'arrowUp', 'arrowDown'],
['left', 'right', 'up', 'down'],
[
'play', 'pause', 'playInToOut', 'goToIn', 'goToOut',
'setIn', 'setOut', 'goToPoster', 'setPoster'
],
['open', 'grow', 'shrink', 'fill', 'fit'],
['unmute', 'volumeUp', 'volumeDown', 'mute'],
[
'chat', 'check', 'click', 'delete', 'edit', 'embed',
'find', 'flag', 'like', 'locate',
'mail', 'map', 'publish', 'star', 'view'
],
[
'list', 'columns', 'grid', 'iconlist',
'gridLandscape', 'gridPortrait',
'iconlistPortraitList', 'iconlistPortraitIconLandscape'
],
['info', 'warning', 'help'],
['select', 'set'],
['undo', 'redo'],
['upload', 'download'],
['unlock', 'lock'],
['copyright', 'noCopyright'],
['volume', 'mount', 'unmount', 'sync'],
['icon', 'clock', 'user']
],
symbols = Ox.flatten(groups),
$buttons = $('<div>').addClass('buttons').appendTo(Ox.$body);
$symbols = $('<div>').addClass('symbols').appendTo(Ox.$body);
groups.forEach(function(symbols) {
Ox.ButtonGroup({
buttons: symbols.map(function(symbol) {
return {
id: symbol,
title: symbol,
tooltip: symbol
};
}),
type: 'image'
})
.appendTo($buttons);
});
symbols.forEach(function(symbol) {
Ox.Element({
element: '<div>',
tooltip: symbol
})
.addClass('OxGrid symbol')
.append(
$('<img>').attr({src: Ox.UI.getImageURL(
'symbol' + symbol[0].toUpperCase() + symbol.substr(1))
})
)
.appendTo($symbols);
});
});