2011-03-07 22:31:46 +00:00
|
|
|
<!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>
|
2011-10-29 17:17:14 +00:00
|
|
|
<script src="../../../../build/Ox.UI/jquery/jquery.js"></script>
|
|
|
|
|
<script src="../../../../build/Ox.js"></script>
|
2011-03-07 22:31:46 +00:00
|
|
|
<script>
|
|
|
|
|
$(function() {
|
|
|
|
|
var $body = $('body')
|
|
|
|
|
.css({
|
|
|
|
|
margin: '2px',
|
|
|
|
|
background: 'rgb(240, 240, 240)'
|
|
|
|
|
}),
|
|
|
|
|
$buttons = $('<div>').appendTo($body),
|
|
|
|
|
$symbols = $('<div>').appendTo($body);
|
|
|
|
|
[
|
2011-11-06 18:37:29 +00:00
|
|
|
'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',
|
|
|
|
|
'Volume', 'Mount', 'Unmount', 'Sync',
|
|
|
|
|
'Info', 'Warning', 'Help',
|
|
|
|
|
'Check', 'Embed', 'Bracket',
|
|
|
|
|
'Upload', 'Download',
|
|
|
|
|
'Copyright', 'NoCopyright',
|
|
|
|
|
'Click', 'Delete', 'Edit', 'Find', 'Flag', 'Icon', 'Like',
|
2011-12-18 09:29:35 +00:00
|
|
|
'Mail', 'Publish', 'Set', 'Star', 'User', 'View', 'Loading'
|
2011-03-07 22:31:46 +00:00
|
|
|
].forEach(function(symbol) {
|
2011-11-06 18:37:29 +00:00
|
|
|
var $symbol, src = 'svg/symbol' + symbol + '.svg';
|
2011-03-07 22:31:46 +00:00
|
|
|
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>
|
