<!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>