index.htm 4.18 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
/*margin and padding on body element
	can introduce errors in determining
	element position and are not recommended;
	we turn them off as a foundation for YUI
	CSS treatments. */
body {
	margin:0;
	padding:0;border:0px;
}
</style>

<link rel="stylesheet" type="text/css" href="../../pacotes/yui290/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../pacotes/yui290/build/colorpicker/assets/skins/sam/colorpicker.css" />
<script type="text/javascript" src="../../pacotes/yui290/build/utilities/utilities.js"></script>
<script type="text/javascript" src="../../pacotes/yui290/build/slider/slider.js"></script>
<script type="text/javascript" src="../../pacotes/yui290/build/colorpicker/colorpicker.js"></script>


<!--begin custom header content for this example-->

<style type="text/css">
	#container { position: relative; padding: 6px; background-color: #eeeeee; width: 300px; height:200px; }
	.yui-picker-controls li {padding: 01px;}
</style>
<!--end custom header content for this example-->
<title></title>
</head>
<body class=" yui-skin-sam">
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="container">
</div>
<button onclick="aplicarCor()" style="position:absolute;top:188px"  >aplicar</button>
<!--We'll use these to trigger interactions with the Color Picker
API -->
<script type="text/javascript">
(function() {
		var Event = YAHOO.util.Event,
				picker;

		Event.onDOMReady(function() {
						picker = new YAHOO.widget.ColorPicker("container", {
										showhsvcontrols: true,
										showhexcontrols: true,
					images: {
						PICKER_THUMB: window.parent.i3GEO.configura.locaplic+"/pacotes/yui290/build/colorpicker/assets/picker_thumb.png",
						HUE_THUMB: window.parent.i3GEO.configura.locaplic+"/pacotes/yui290/build/colorpicker/assets/hue_thumb.png"
						}
								});
			var onRgbChange = function(o) {
			};
			picker.on("rgbChange", onRgbChange);
			document.getElementById("yui-picker-swatch").style.display = "none";
			document.getElementById("yui-picker-controls").style.top = "0px";
			document.getElementById("yui-picker-websafe-swatch").style.left = "245px";
			document.getElementById("yui-picker-websafe-swatch").style.top = "185px";
			Event.on("reset", "click", function(e) {
				picker.setValue([255, 255, 255], false);

			});
			Event.on("gethex", "click", function(e) {
			});
				});

})();
//
//utilize tipo na url para definir o tipo de cor de retorno
//default e hex
//se for usado rgbSep, o retorno sera em rgb separado por " "
function aplicarCor()
{
	navm = false; // IE
	navn = false; // netscape
	var doc,ncor,
		app = navigator.appName.substring(0,1),
		tipo = "",
		sep = ",";

	if (app=='N') navn=true; else navm=true;
	try{
		doc = unescape(((((window.location.href).split("doc="))[1]).split("&"))[0] );
		if(doc != "")
		{doc = (navm) ? window.parent.frames(doc).document : window.parent.document.getElementById(doc).contentDocument;}
		else
		{doc = window.parent.document;}
		tipo = unescape(((((window.location.href).split("tipo="))[1]).split("&"))[0] );
	}
	catch(e){doc = window.parent.document;var tipo = "rgb";}
	var elemento = unescape(((((window.location.href).split("elemento="))[1]).split("&"))[0] );
	if(tipo == "rgbSep"){
		sep = " ";
	}
	if(tipo == "rgb" || tipo == "rgbSep")
	{ncor = document.getElementById("yui-picker-r").value+sep+document.getElementById("yui-picker-g").value+sep+document.getElementById("yui-picker-b").value;}
	else
	{ncor = "#"+document.getElementById("yui-picker-hex").value;}
	doc.getElementById(elemento).value = ncor;
	try{
		doc.getElementById(elemento).onchange.call();
	}
	catch(e){}
	window.parent.YAHOO.i3GEO.janela.manager.find("i3geo_janelaCor").destroy();
	//window.parent.YAHOO.janelaCor.xp.panel.destroy();
}

window.parent.document.body.scrollTop = window.parent.document.documentElement.scrollTop = 0;
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>