颜色选择器 Color Picker,IE,Firefox,Opera,Safar_Javascript教程-查字典教程网

from: 颜色选择器 colorpicker

http://jscolor.com/

http://dematte.at/colorPicker/

http://www.free-color-picker.com/color-picker-samples.php

http://www.nogray.com/color_picker.php

http://www.mattkruse.com/javascript/colorpicker/

ColorPicker2.js代码

复制代码代码如下:

// ===================================================================

// Author: Matt Kruse <matt@mattkruse.com>

// WWW: http://www.mattkruse.com/

// NOTICE: You may use this code for any purpose, commercial or

// private, without any further permission from the author. You may

// remove this notice from your final code if you wish, however it is

// appreciated by the author if at least my web site address is kept.

// You may *NOT* re-distribute this code in any way except through its

// use. That means, you can include it in your product, or your web

// site, or any other form where the code is actually being used. You

// may not put the plain javascript up on your site for download or

// include it in your javascript libraries for download.

// If you wish to share this code with others, please just point them

// to the URL instead.

// Please DO NOT link directly to my .js files from your site. Copy

// the files to your server and use them there. Thank you.

// ===================================================================

/* SOURCE FILE: AnchorPosition.js */

function AnchorPosition_getPageOffsetLeft(el){var ol=el.offsetLeft;while((el=el.offsetParent) != null){ol += el.offsetLeft;}return ol;}

function AnchorPosition_getWindowOffsetLeft(el){return AnchorPosition_getPageOffsetLeft(el)-document.body.scrollLeft;}

function AnchorPosition_getPageOffsetTop(el){var ot=el.offsetTop;while((el=el.offsetParent) != null){ot += el.offsetTop;}return ot;}

function AnchorPosition_getWindowOffsetTop(el){return AnchorPosition_getPageOffsetTop(el)-document.body.scrollTop;}

/* SOURCE FILE: PopupWindow.js */

function PopupWindow_setSize(width,height){this.width = width;this.height = height;}

function PopupWindow_populate(contents){this.contents = contents;this.populated = false;}

function PopupWindow_setUrl(url){this.url = url;}

function PopupWindow_setWindowProperties(props){this.windowProperties = props;}

function PopupWindow_hideIfNotClicked(e){if(this.autoHideEnabled && !this.isClicked(e)){this.hidePopup();}}

function PopupWindow_autoHide(){this.autoHideEnabled = true;}

function PopupWindow_hidePopupWindows(e){for(var i=0;i<popupWindowObjects.length;i++){if(popupWindowObjects[i] != null){var p = popupWindowObjects[i];p.hideIfNotClicked(e);}}}

/* SOURCE FILE: ColorPicker2.js */

ColorPicker_targetInput = null;

function ColorPicker_writeDiv(){document.writeln("<DIV ID="colorPickerDiv"> </DIV>");}

function ColorPicker_show(anchorname){this.showPopup(anchorname);}

function ColorPicker_pickColor(color,obj){obj.hidePopup();pickColor(color);}

function pickColor(color){if(ColorPicker_targetInput==null){alert("Target Input is null, which means you either didn't use the 'select' function or you have no defined your own 'pickColor' function to handle the picked color!");return;}ColorPicker_targetInput.value = color;}

function ColorPicker_select(inputobj,linkname){if(inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!="textarea"){alert("colorpicker.select: Input object passed is not a valid form input object");window.ColorPicker_targetInput=null;return;}window.ColorPicker_targetInput = inputobj;this.show(linkname);}

function ColorPicker_highlightColor(c){var thedoc =(arguments.length>1)?arguments[1]:window.document;var d = thedoc.getElementById("colorPickerSelectedColor");d.style.backgroundColor = c;d = thedoc.getElementById("colorPickerSelectedColorValue");d.innerHTML = c;}

"#3300FF","#660000","#660033","#660066","#660099","#6600CC","#6600FF","#990000","#990033","#990066","#990099",

"#9900CC","#9900FF","#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF","#FF0000","#FF0033","#FF0066",

"#FF0099","#FF00CC","#FF00FF","#003300","#003333","#003366","#003399","#0033CC","#0033FF","#333300","#333333",

"#333366","#333399","#3333CC","#3333FF","#663300","#663333","#663366","#663399","#6633CC","#6633FF","#993300",

"#993333","#993366","#993399","#9933CC","#9933FF","#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF",

"#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF","#006600","#006633","#006666","#006699","#0066CC",

"#0066FF","#336600","#336633","#336666","#336699","#3366CC","#3366FF","#666600","#666633","#666666","#666699",

"#6666CC","#6666FF","#996600","#996633","#996666","#996699","#9966CC","#9966FF","#CC6600","#CC6633","#CC6666",

"#CC6699","#CC66CC","#CC66FF","#FF6600","#FF6633","#FF6666","#FF6699","#FF66CC","#FF66FF","#009900","#009933",

"#009966","#009999","#0099CC","#0099FF","#339900","#339933","#339966","#339999","#3399CC","#3399FF","#669900",

"#669933","#669966","#669999","#6699CC","#6699FF","#999900","#999933","#999966","#999999","#9999CC","#9999FF",

"#CC9900","#CC9933","#CC9966","#CC9999","#CC99CC","#CC99FF","#FF9900","#FF9933","#FF9966","#FF9999","#FF99CC",

"#FF99FF","#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#33CC00","#33CC33","#33CC66","#33CC99",

"#33CCCC","#33CCFF","#66CC00","#66CC33","#66CC66","#66CC99","#66CCCC","#66CCFF","#99CC00","#99CC33","#99CC66",

"#99CC99","#99CCCC","#99CCFF","#CCCC00","#CCCC33","#CCCC66","#CCCC99","#CCCCCC","#CCCCFF","#FFCC00","#FFCC33",

"#FFCC66","#FFCC99","#FFCCCC","#FFCCFF","#00FF00","#00FF33","#00FF66","#00FF99","#00FFCC","#00FFFF","#33FF00",

"#33FF33","#33FF66","#33FF99","#33FFCC","#33FFFF","#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF",

"#99FF00","#99FF33","#99FF66","#99FF99","#99FFCC","#99FFFF","#CCFF00","#CCFF33","#CCFF66","#CCFF99","#CCFFCC",

"#CCFFFF","#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF");var total = colors.length;var width = 18;var cp_contents = "";var windowRef =(windowMode)?"window.opener.":"";if(windowMode){cp_contents += "<HTML><HEAD><TITLE>Select Color</TITLE></HEAD>";cp_contents += "<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0><CENTER>";}cp_contents += "<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=0>";var use_highlight =(document.getElementById || document.all)?true:false;for(var i=0;i<total;i++){if((i % width) == 0){cp_contents += "<TR>";}if(use_highlight){var mo = 'onMouseOver="'+windowRef+'ColorPicker_highlightColor(''+colors[i]+'',window.document)"';}else{mo = "";}cp_contents += '<TD BGCOLOR="'+colors[i]+'"><FONT SIZE="-3"><A HREF="#" '+mo+'></A></FONT></TD>';if( ((i+1)>=total) ||(((i+1) % width) == 0)){cp_contents += "</TR>";}}if(document.getElementById){var width1 = Math.floor(width/2);var width2 = width = width1;cp_contents += "<TR><TD COLSPAN='"+width1+"' BGCOLOR='#ffffff' ID='colorPickerSelectedColor'></TD><TD COLSPAN='"+width2+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";}cp_contents += "</TABLE>";if(windowMode){cp_contents += "</CENTER></BODY></HTML>";}cp.populate(cp_contents+"n");cp.offsetY = 25;cp.autoHide();return cp;}

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>颜色选择器 Color Picker,Internet Explorer,Firefox,Opera,Safar,Ace Explorer,Avant Browser,Flock,Google Chrome,Konqueror,Netscape,SeaMonkey </title>

var cp = new ColorPicker('window'); // Popup window

var cp2 = new ColorPicker(); // DIV style

</script>

</head>

<body>

<form>

<tr>

<td>

This popup uses a "window" popup. Use this<br/>

For browsers that don't support DHTML.<br/>

Color: <input type="text" name="color" size="20" value=""/> <a href="#" name="pick" id="pick">Pick</a>

</td>

</tr>

</table>

<br/>

<tr>

<td>

This popup uses a DHTML "layer". It looks<br/>

nicer, but won't work in older browsers and<br/>

The color popup won't display over some form<br/>

elements in some browsers!<br/>

Color: <input type="text" name="color2" size="20" value=""/> <a href="#" name="pick2" id="pick2">Pick</a>

</td>

</tr>

</table>

</form>

</body>

</html>