diff --git a/examples/json_to_list/css/example.css b/examples/json_to_list/css/example.css new file mode 100644 index 00000000..a02a943a --- /dev/null +++ b/examples/json_to_list/css/example.css @@ -0,0 +1,7 @@ +.OxTreeList { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} \ No newline at end of file diff --git a/examples/json_to_list/index.html b/examples/json_to_list/index.html new file mode 100644 index 00000000..5534aa98 --- /dev/null +++ b/examples/json_to_list/index.html @@ -0,0 +1,13 @@ + + + + JSON to List + + + + + + + + + \ No newline at end of file diff --git a/examples/json_to_list/js/example.js b/examples/json_to_list/js/example.js new file mode 100644 index 00000000..33f7c9e2 --- /dev/null +++ b/examples/json_to_list/js/example.js @@ -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); + + }); + +}); \ No newline at end of file diff --git a/examples/symbols/css/example.css b/examples/symbols/css/example.css new file mode 100644 index 00000000..3316cba6 --- /dev/null +++ b/examples/symbols/css/example.css @@ -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; +} \ No newline at end of file diff --git a/examples/symbols/index.html b/examples/symbols/index.html new file mode 100644 index 00000000..f266bf7e --- /dev/null +++ b/examples/symbols/index.html @@ -0,0 +1,13 @@ + + + + Symbols + + + + + + + + + \ No newline at end of file diff --git a/examples/symbols/js/example.js b/examples/symbols/js/example.js new file mode 100644 index 00000000..7f932f4a --- /dev/null +++ b/examples/symbols/js/example.js @@ -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 = $('
').addClass('buttons').appendTo(Ox.$body); + $symbols = $('
').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: '
', + tooltip: symbol + }) + .addClass('OxGrid symbol') + .append( + $('').attr({src: Ox.UI.getImageURL( + 'symbol' + symbol[0].toUpperCase() + symbol.substr(1)) + }) + ) + .appendTo($symbols); + }); + +});