oxjs/demos/form2/color.html
2011-12-21 21:03:52 +05:30

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>