77 lines
No EOL
3.1 KiB
HTML
77 lines
No EOL
3.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>color</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
|
|
<link rel="stylesheet" type="text/css" href="css/form.css"/>
|
|
<script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script>
|
|
<script type="text/javascript" src="../../build/js/ox.js"></script>
|
|
<script type="text/javascript" src="../../build/js/ox.data.js"></script>
|
|
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
|
|
<script>
|
|
$(function() {
|
|
var $body = $("body"),
|
|
$ranges = [],
|
|
color = [255, 0, 0],
|
|
rgb = ["red", "green", "blue"],
|
|
$color = new Ox.Label({
|
|
width: 256
|
|
})
|
|
.css({
|
|
height: "46px",
|
|
background: getColor()
|
|
})
|
|
.appendTo($body);
|
|
$.each(Ox.range(3), function(i) {
|
|
var colors = getColors(i);
|
|
$ranges[i] = new Ox.Range({
|
|
arrows: true,
|
|
changeOnDrag: true,
|
|
id: rgb[i],
|
|
max: 255,
|
|
size: 256,
|
|
thumbSize: 40,
|
|
thumbValue: true,
|
|
trackColors: colors,
|
|
value: color[i]
|
|
})
|
|
.css({
|
|
marginBottom: "-4px"
|
|
})
|
|
.bindEvent("change", function(event, data) {
|
|
change(i, data.value);
|
|
})
|
|
.appendTo($body);
|
|
});
|
|
function change(index, value) {
|
|
color[index] = value;
|
|
$color.css({
|
|
background: getColor()
|
|
});
|
|
$.each(Ox.range(3), function(i) {
|
|
if (i != index) {
|
|
$ranges[i].options({
|
|
trackColors: getColors(i)
|
|
});
|
|
}
|
|
});
|
|
}
|
|
function getColor() {
|
|
return "rgb(" + color.join(", ") + ")";
|
|
}
|
|
function getColors(index) {
|
|
return [
|
|
"rgb(" + $.map(Ox.range(3), function(v) {
|
|
return v == index ? 0 : color[v];
|
|
}).join(", ") + ")",
|
|
"rgb(" + $.map(Ox.range(3), function(v) {
|
|
return v == index ? 255 : color[v];
|
|
}).join(", ") + ")"
|
|
]
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body></body>
|
|
</html> |