add more examples
This commit is contained in:
parent
c72031bfdf
commit
c7e89cf73a
6 changed files with 128 additions and 0 deletions
7
examples/json_to_list/css/example.css
Normal file
7
examples/json_to_list/css/example.css
Normal 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
13
examples/json_to_list/index.html
Normal 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
13
examples/json_to_list/js/example.js
Normal 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
13
examples/symbols/css/example.css
Normal 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
13
examples/symbols/index.html
Normal 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
69
examples/symbols/js/example.js
Normal 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);
|
||||
});
|
||||
|
||||
});
|
Loading…
Reference in a new issue