雅虎UI 取色器【笨笨 20151005】(使用HTA实现UI)

最新推荐文章于 2024-08-07 23:39:23 发布

笑虾

最新推荐文章于 2024-08-07 23:39:23 发布

阅读量1.4k

点赞数

分类专栏： JavaScript PS 文章标签： hta 雅虎 ui 取色器

大家好，我是笨笨，笨笨的笨，笨笨的笨，转载请注明出处，谢谢！

本文链接：https://blog.csdn.net/jx520/article/details/49022285

版权

JavaScript 同时被 2 个专栏收录

80 篇文章 19 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

有时想查看下颜色的16进制和RGB转的。这都要打开PS也太坑了。

20151005 国庆在家东拼西凑的。
大家好，我是笨笨，笨笨的笨，笨笨的笨。

用的是雅虎的UI库，所以就叫“雅虎UI 取色器 ”了（不是单文件，所以放到百度盘了。以后有心情可以考虑用自解压打个包）

链接: http://pan.baidu.com/s/1bnnw8KR 密码: whsm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- 
有时想查看下颜色的16进制和RGB转的。这都要打开PS也太坑了。
20151005 国庆在家东拼西凑的。
大家好，我是笨笨，笨笨的笨，笨笨的笨。
-->
<head>
<title>雅虎UI 取色器 【笨笨 20151005】   http://blog.csdn.net/jx520</title>
<script type="text/javascript">
while (true) {
    try {
        var width = 500, height = 350;
        window.resizeTo(width, height);
        window.moveTo((window.screen.width - width) / 2, (window.screen.height - height) / 2);
        break;
    } catch (e) { continue; }
}
</script>


<HTA:APPLICATION
  APPLICATIONNAME="ColorPicker"
  ID="JHTA"
  VERSION="1.0"
  BORDER="dialog"
  SCROLL="no"
  SINGLEINSTANCE="yes"
  CONTEXTMENU="yes"
  NAVIGABLE="yes"/>




<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;
	text-align: center;
}


</style>


<!-- Dependencies -->
<script src="./script/utilities.js" ></script>
<script src="./script/slider-min.js" ></script>
 
<!-- Color Picker source files for CSS and JavaScript -->
<link rel="stylesheet" type="text/css" href="./css/colorpicker.css">
<link rel="stylesheet" type="text/css" href="./css/fonts-min.css" />
<script src="./script/colorpicker-min.js" ></script>


<!--begin custom header content for this example-->
<style type="text/css">
  #container { position: relative; padding: 6px; background-color: #eeeeee; width: 420px; height:180px; }
  #container .yui-picker-controls li {
    list-style: none;
  }
</style>






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


</head>


<body class="yui-skin-sam">




<h1>Color Picker</h1>


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


<div id="container">
</div>


<!--We'll use these to trigger interactions with the Color Picker
API -->
<p/>


<button id="reset" style=" width:200px;">重置为白色</button>
<button id="gethex" style=" width:200px;">复制颜色值</button> 


<script type="text/javascript">
(function() {
    var Event = YAHOO.util.Event,
        picker;


    Event.onDOMReady(function() {
//			YAHOO.log("Creating Color Picker.", "info", "example");
            picker = new YAHOO.widget.ColorPicker("container", {
                    showhsvcontrols: true,
                    showhexcontrols: true,
					images: {
						PICKER_THUMB: "assets/picker_thumb.png",
						HUE_THUMB: "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"); 
				//window.prompt("复制颜色值: Ctrl+C, 回车", "text");
				var meintext = document.getElementById("yui-picker-hex").value;
				window.clipboardData.setData("Text", meintext);
//=====================
document.getElementById("tips").style.background ="#"+meintext;
var attributes = {
	top:  { from: 100, to: 100, unit: 'px' },
	top:  {from: 100, by: -200 }
}; 
var myAnim = new YAHOO.util.Anim('tips', attributes);
myAnim.duration = .7;
myAnim.method = YAHOO.util.Easing.easeIn;
myAnim.animate();


//==========================visibility:hidden;
			});
        });
})();
</script>


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


<div id="tips" style="background:#888888;padding:20px;
position:absolute; left:120px; top:500px;
width:200px; height:25px; z-index:1;border-color : #969696; "><div style="background:#888888;color:white;font-weight:bold;">复制成功！</div></div>


</body>
</html>


<!-- SpaceID=0 robot -->


<!-- VER-3.0.235613 -->
<!-- doc3.ydn.gq1.yahoo.com compressed/chunked Tue Jul 30 21:13:48 PDT 2013 -->