sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

change symbols from png to svg

Browse source
This commit is contained in:
rlx 2011-03-07 22:31:46 +00:00
commit f8485f0874
570 changed files with 1674 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

97
source/svg/index.html Normal file
View file

@ -0,0 +1,97 @@
<!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>