2in3.html revision 2659f65a0425d98b674a33579167696396019630
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug="true">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
}
#container { position: relative; padding: 6px; background-color: #eeeeee; width: 420px; height:220px; }
</style>
<title>use('yui2-') and then get dependencies</title>
<script src="/build/yui/yui-debug.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
YUI({
combine: true // running locally, so I need to force combo handling
// gallery: 'gallery-2010.02.22-22'
// }).use('gallery-storage-lite', 'gallery-treeview', function (Y) {
// }).use('yui2-animation', 'gallery-treeview', 'base', function (Y) {
// }).use('yui2-editor', 'yui2-datatable', 'yui2-colorpicker', function (Y) {
// }).use('gallery-yql', 'base', 'yui2-colorpicker', function (Y) {
}).use('yui2-colorpicker', function (Y) {
var YAHOO = Y.YUI2;
Y.log(YAHOO.util.Event);
var Event = YAHOO.util.Event,
picker;
Event.onAvailable('container', function() {
YAHOO.log("Creating Color Picker.", "info", "example");
picker = new YAHOO.widget.ColorPicker("container", {
showhsvcontrols: true,
showhexcontrols: true,
images: {
PICKER_THUMB: "http://yui.yahooapis.com/2.8.0r4/build/colorpicker/assets/picker_thumb.png",
HUE_THUMB: "http://yui.yahooapis.com/2.8.0r4/build/colorpicker/assets/hue_thumb.png"
}
});
YAHOO.log("Finished creating Color Picker.", "info", "example");
//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"
}
*/
YAHOO.log("The new color value is " + o.newValue, "info", "example");
}
//subscribe to the rgbChange event;
picker.on("rgbChange", onRgbChange);
//use setValue to reset the value to white:
Event.on("reset", "click", function(e) {
picker.setValue([255, 255, 255], false); //false here means that rgbChange
//wil fire; true would silence it
});
//use the "get" method to get the current value
//of one of the Color Picker's properties; in
//this case, we'll get the hex value and write it
//to the log:
Event.on("gethex", "click", function(e) {
YAHOO.log("Current hex value: " + picker.get("hex"), "info", "example");
});
});
});
</script>
<body class="yui-skin-sam">
<div id="container">
</div>
<!--We'll use these to trigger interactions with the Color Picker
API -->
<button id="reset">Reset Color to White</button>
<button id="gethex">Write current hex value to the Logger</button>
</body>
</html>