oxjs/source/Ox.UI/themes/classic/_index.html

102 lines
3.9 KiB
HTML
Raw Normal View History

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);
[
'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',
2011-12-30 09:33:01 +00:00
'List', 'Grid', 'Map', 'Calendar',
'Click', 'Delete', 'Edit', 'Find', 'Flag', 'Icon', 'Like',
'Mail', 'Publish', 'Set', 'Star', 'User', 'View', 'Loading'
2011-03-07 22:31:46 +00:00
].forEach(function(symbol) {
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>