97 lines
3.6 KiB
HTML
97 lines
3.6 KiB
HTML
|
<!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/js/jquery-1.5.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',
|
||
|
|
'center', 'zoom', 'grow', 'shrink', 'fill', 'fit',
|
||
|
|
'unmute', 'volumeUp', 'volumeDown', 'mute',
|
||
|
|
'undo', 'redo', 'unlock', 'lock',
|
||
|
|
'mount', 'unmount', 'sync',
|
||
|
|
'info', 'warning', 'help',
|
||
|
|
'check', 'bracket',
|
||
|
|
'delete', 'download', 'edit', 'find', 'flag', 'like',
|
||
|
|
'publish', 'set', 'star', 'user', 'view', 'loading'
|
||
|
|
].forEach(function(symbol) {
|
||
|
|
var $symbol, src = 'symbols/' + 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>
|