Привет всем, у меня есть это задание, где мне нужно интегрировать подборщик цветов в пользовательский интерфейс Yahoo на веб-сайт. Когда кто-то выбирает цвет, фон страницы должен стать таким цветом.Как использовать сортировщик Yahoo для изменения цвета фона
Я следовал инструкциям здесь http://developer.yahoo.com/yui/colorpicker/#events, но я не могу понять, как изменить цвет фона на выбранный цвет. Я могу изменить фон, когда кто-то выбирает цвет, однако я не знаю, как получить цвет, который выбран в качестве ввода/(см. Код для // комментария), до сих пор у меня есть:
в голове:
<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.8.2r1/build/utilities/utilities.js" ></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/slider/slider-min.js" ></script>
<!-- Color Picker source files for CSS and JavaScript -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/colorpicker/assets/skins/sam/colorpicker.css">
<script src="http://yui.yahooapis.com/2.8.2r1/build/colorpicker/colorpicker-min.js" ></script>
затем в тело тега: class="yui-skin-sam"
и в теле:
<div id="container"></div>
<script type="text/javascript">
var picker = new YAHOO.widget.ColorPicker("container", {
showhsvcontrols: true,
showhexcontrols: true,
images: {
PICKER_THUMB: "picker_thumb.png",
HUE_THUMB: "hue_thumb.png"
}
});
//a listener for logging RGB color changes;
//this will only be visible if logger is enabled:
var onRgbChange = function(o) {
/*o is an object
{ newValue: (array of R, G, B values),
prevValue: (array of R, G, B values),
type: "rgbChange"
}
*/
// with this code i change the background when a color is picked, but not with the input col.
// document.body.style.backgroundColor = 'green';
YAHOO.log("The new color value is " + o.newValue, "info", "example");
}
//subscribe to the rgbChange event;
picker.on("rgbChange", onRgbChange);
</script>