<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> input { width: 10px; height: 10px; padding: 2px; border: 1px solid rgb(128, 128, 128); border-radius: 8px; margin: 2px; background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192))); } input[src="symbols/loading.svg"] { width: 16px; height: 16px; padding: 0; border: 0; background: transparent; } div.symbol { float: left; position: relative; width: 256px; height: 256px; margin: 4px; background-image: 'grid.png' repeat; } div.symbol > div { float: left; width: 16px; height: 16px; } img { position: relative; top: -256px; width: 256px; height: 256px; } </style> <script src="../../../../build/jquery/jquery.js"></script> <script src="../../../Ox.js"></script> <script> $(function() { var $body = $('body') .css({ margin: '2px', background: 'rgb(240, 240, 240)' }), $buttons = $('<div>').appendTo($body), $symbols = $('<div>').appendTo($body); [ 'add', 'remove', 'close', 'select', 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowDown', 'left', 'right', 'up', 'down', 'pause', 'playInToOut', 'goToIn', 'goToOut', 'setIn', 'setOut', 'goToPoster', 'setPoster', 'center', 'zoom', 'grow', 'shrink', 'fill', 'fit', 'unmute', 'volumeUp', 'volumeDown', 'mute', 'undo', 'redo', 'unlock', 'lock', 'mount', 'unmount', 'sync', 'info', 'warning', 'help', 'check', 'embed', 'bracket', 'delete', 'download', 'edit', 'find', 'flag', 'like', 'publish', 'set', 'star', 'user', 'view', 'loading' ].forEach(function(symbol) { var $symbol, src = 'svg/symbol' + Ox.toTitleCase(symbol) + '.svg'; console.log(symbol) $('<input>') .attr({ src: src, title: symbol, type: 'image' }) .appendTo($buttons); $symbol = $('<div>') .addClass('symbol') .appendTo($symbols); for (var i = 0; i < 256; i++) { color = (i + Math.floor(i / 16)) % 2 == 0 ? 224 : 192; $('<div>') .css({ backgroundColor: 'rgb(' + [color, color, color].join(', ') + ')' }) .appendTo($symbol) } $('<img>') .attr({ src: src }) .appendTo($symbol); }); }); </script> </head> <body></body> </html>