add more examples

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 = $('<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);
+    });
+
+});