Yui: различия между версиями

Содержимое удалено Содержимое добавлено
Нет описания правки
Нет описания правки
Строка 550:
 
<h3><span>Color Picker (Выбор цвета)</span></h3>
'''Простая реализация выбора цвета:'''
<source lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/colorpicker/assets/skins/sam/colorpicker.css" />
<script type="text/javascript" src="yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="yui/build/slider/slider.js"></script>
<script type="text/javascript" src="yui/build/colorpicker/colorpicker-beta.js"></script>
<style type="text/css">
#container { position: relative; padding: 6px; background-color: #eeeeee; width: 420px; height:220px; }
</style>
<!-- 1 -->
 
<!-- 2 -->
<div id="container">
</div>
<button id="reset">Reset Color to White</button>
 
<script type="text/javascript">
(function() {
var Event = YAHOO.util.Event,
picker;
Event.onDOMReady(function() { // При загрузке всего дерева DOM вызвать эту ф-ю
picker = new YAHOO.widget.ColorPicker("container", {
showhsvcontrols: true,
showhexcontrols: true,
images: {
PICKER_THUMB: "yui/examples/colorpicker/assets/picker_thumb.png",
HUE_THUMB: "yui/examples/colorpicker/assets/hue_thumb.png"
// файлы рисунков для указателей при выборе цвета
}
});
 
var onRgbChange = function(o) {
}
picker.on("rgbChange", onRgbChange); // вызываем функцию onRgbChange по событию "rgbChange"
//вызов ф-ии для установки цвета в белый по событию "click" на элементе с id="reset"
Event.on("reset", "click", function(e) {
picker.setValue([255, 255, 255], false); //false here means that rgbChange
});
 
});
})();
</script>
<!-- 2 -->
</source>