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代码
1
//
===================================================================
2 // Author: Matt Kruse <matt@mattkruse.com>
3 // WWW: http://www.mattkruse.com/
4 //
5 // NOTICE: You may use this code for any purpose, commercial or
6 // private, without any further permission from the author. You may
7 // remove this notice from your final code if you wish, however it is
8 // appreciated by the author if at least my web site address is kept.
9 //
10 // You may *NOT* re-distribute this code in any way except through its
11 // use. That means, you can include it in your product, or your web
12 // site, or any other form where the code is actually being used. You
13 // may not put the plain javascript up on your site for download or
14 // include it in your javascript libraries for download.
15 // If you wish to share this code with others, please just point them
16 // to the URL instead.
17 // Please DO NOT link directly to my .js files from your site. Copy
18 // the files to your server and use them there. Thank you.
19 // ===================================================================
20
21 /* SOURCE FILE: AnchorPosition.js */
22 function getAnchorPosition(anchorname){ var useWindow = false ; var coordinates = new Object(); var x = 0 ,y = 0 ; var use_gebi = false , use_css = false , use_layers = false ; if (document.getElementById){use_gebi = true ;} else if (document.all){use_css = true ;} else if (document.layers){use_layers = true ;} if (use_gebi && document.all){x = AnchorPosition_getPageOffsetLeft(document.all[anchorname]);y = AnchorPosition_getPageOffsetTop(document.all[anchorname]);} else if (use_gebi){ var o = document.getElementById(anchorname);x = AnchorPosition_getPageOffsetLeft(o);y = AnchorPosition_getPageOffsetTop(o);} else if (use_css){x = AnchorPosition_getPageOffsetLeft(document.all[anchorname]);y = AnchorPosition_getPageOffsetTop(document.all[anchorname]);} else if (use_layers){ var found = 0 ; for ( var i = 0 ;i < document.anchors.length;i ++ ){ if (document.anchors[i].name == anchorname){found = 1 ; break ;}} if (found == 0 ){coordinates.x = 0 ;coordinates.y = 0 ; return coordinates;}x = document.anchors[i].x;y = document.anchors[i].y;} else {coordinates.x = 0 ;coordinates.y = 0 ; return coordinates;}coordinates.x = x;coordinates.y = y; return coordinates;}
23 function getAnchorWindowPosition(anchorname){ var coordinates = getAnchorPosition(anchorname); var x = 0 ; var y = 0 ; if (document.getElementById){ if (isNaN(window.screenX)){x = coordinates.x - document.body.scrollLeft + window.screenLeft;y = coordinates.y - document.body.scrollTop + window.screenTop;} else {x = coordinates.x + window.screenX + (window.outerWidth - window.innerWidth) - window.pageXOffset;y = coordinates.y + window.screenY + (window.outerHeight - 24 - window.innerHeight) - window.pageYOffset;}} else if (document.all){x = coordinates.x - document.body.scrollLeft + window.screenLeft;y = coordinates.y - document.body.scrollTop + window.screenTop;} else if (document.layers){x = coordinates.x + window.screenX + (window.outerWidth - window.innerWidth) - window.pageXOffset;y = coordinates.y + window.screenY + (window.outerHeight - 24 - window.innerHeight) - window.pageYOffset;}coordinates.x = x;coordinates.y = y; return coordinates;}
24 function AnchorPosition_getPageOffsetLeft(el){ var ol = el.offsetLeft; while ((el = el.offsetParent) != null ){ol += el.offsetLeft;} return ol;}
25 function AnchorPosition_getWindowOffsetLeft(el){ return AnchorPosition_getPageOffsetLeft(el) - document.body.scrollLeft;}
26 function AnchorPosition_getPageOffsetTop(el){ var ot = el.offsetTop; while ((el = el.offsetParent) != null ){ot += el.offsetTop;} return ot;}
27 function AnchorPosition_getWindowOffsetTop(el){ return AnchorPosition_getPageOffsetTop(el) - document.body.scrollTop;}
28
29 /* SOURCE FILE: PopupWindow.js */
30 function PopupWindow_getXYPosition(anchorname){ var coordinates; if ( this .type == " WINDOW " ){coordinates = getAnchorWindowPosition(anchorname);} else {coordinates = getAnchorPosition(anchorname);} this .x = coordinates.x; this .y = coordinates.y;}
31 function PopupWindow_setSize(width,height){ this .width = width; this .height = height;}
32 function PopupWindow_populate(contents){ this .contents = contents; this .populated = false ;}
33 function PopupWindow_setUrl(url){ this .url = url;}
34 function PopupWindow_setWindowProperties(props){ this .windowProperties = props;}
35 function PopupWindow_refresh(){ if ( this .divName != null ){ if ( this .use_gebi){document.getElementById( this .divName).innerHTML = this .contents;} else if ( this .use_css){document.all[ this .divName].innerHTML = this .contents;} else if ( this .use_layers){ var d = document.layers[ this .divName];d.document.open();d.document.writeln( this .contents);d.document.close();}} else { if ( this .popupWindow != null && ! this .popupWindow.closed){ if ( this .url != "" ){ this .popupWindow.location.href = this .url;} else { this .popupWindow.document.open(); this .popupWindow.document.writeln( this .contents); this .popupWindow.document.close();} this .popupWindow.focus();}}}
36 function PopupWindow_showPopup(anchorname){ this .getXYPosition(anchorname); this .x += this .offsetX; this .y += this .offsetY; if ( ! this .populated && ( this .contents != "" )){ this .populated = true ; this .refresh();} if ( this .divName != null ){ if ( this .use_gebi){document.getElementById( this .divName).style.left = this .x + " px " ;document.getElementById( this .divName).style.top = this .y;document.getElementById( this .divName).style.visibility = " visible " ;} else if ( this .use_css){document.all[ this .divName].style.left = this .x;document.all[ this .divName].style.top = this .y;document.all[ this .divName].style.visibility = " visible " ;} else if ( this .use_layers){document.layers[ this .divName].left = this .x;document.layers[ this .divName].top = this .y;document.layers[ this .divName].visibility = " visible " ;}} else { if ( this .popupWindow == null || this .popupWindow.closed){ if ( this .x < 0 ){ this .x = 0 ;} if ( this .y < 0 ){ this .y = 0 ;} if (screen && screen.availHeight){ if (( this .y + this .height) > screen.availHeight){ this .y = screen.availHeight - this .height;}} if (screen && screen.availWidth){ if (( this .x + this .width) > screen.availWidth){ this .x = screen.availWidth - this .width;}} var avoidAboutBlank = window.opera || ( document.layers && ! navigator.mimeTypes[ ' * ' ]) || navigator.vendor == ' KDE ' || ( document.childNodes && ! document.all && ! navigator.taintEnabled); this .popupWindow = window.open(avoidAboutBlank ? "" : " about:blank " , " window_ " + anchorname, this .windowProperties + " ,width= " + this .width + " ,height= " + this .height + " ,screenX= " + this .x + " ,left= " + this .x + " ,screenY= " + this .y + " ,top= " + this .y + "" );} this .refresh();}}
37 function PopupWindow_hidePopup(){ if ( this .divName != null ){ if ( this .use_gebi){document.getElementById( this .divName).style.visibility = " hidden " ;} else if ( this .use_css){document.all[ this .divName].style.visibility = " hidden " ;} else if ( this .use_layers){document.layers[ this .divName].visibility = " hidden " ;}} else { if ( this .popupWindow && ! this .popupWindow.closed){ this .popupWindow.close(); this .popupWindow = null ;}}}
38 function PopupWindow_isClicked(e){ if ( this .divName != null ){ if ( this .use_layers){ var clickX = e.pageX; var clickY = e.pageY; var t = document.layers[ this .divName]; if ((clickX > t.left) && (clickX < t.left + t.clip.width) && (clickY > t.top) && (clickY < t.top + t.clip.height)){ return true ;} else { return false ;}} else if (document.all){ var t = window.event.srcElement; while (t.parentElement != null ){ if (t.id == this .divName){ return true ;}t = t.parentElement;} return false ;} else if ( this .use_gebi && e){ var t = e.originalTarget; while (t.parentNode != null ){ if (t.id == this .divName){ return true ;}t = t.parentNode;} return false ;} return false ;} return false ;}
39 function PopupWindow_hideIfNotClicked(e){ if ( this .autoHideEnabled && ! this .isClicked(e)){ this .hidePopup();}}
40 function PopupWindow_autoHide(){ this .autoHideEnabled = true ;}
41 function PopupWindow_hidePopupWindows(e){ for ( var i = 0 ;i < popupWindowObjects.length;i ++ ){ if (popupWindowObjects[i] != null ){ var p = popupWindowObjects[i];p.hideIfNotClicked(e);}}}
42 function PopupWindow_attachListener(){ if (document.layers){document.captureEvents(Event.MOUSEUP);}window.popupWindowOldEventListener = document.onmouseup; if (window.popupWindowOldEventListener != null ){document.onmouseup = new Function( " window.popupWindowOldEventListener();PopupWindow_hidePopupWindows(); " );} else {document.onmouseup = PopupWindow_hidePopupWindows;}}
43 function PopupWindow(){ if ( ! window.popupWindowIndex){window.popupWindowIndex = 0 ;} if ( ! window.popupWindowObjects){window.popupWindowObjects = new Array();} if ( ! window.listenerAttached){window.listenerAttached = true ;PopupWindow_attachListener();} this .index = popupWindowIndex ++ ;popupWindowObjects[ this .index] = this ; this .divName = null ; this .popupWindow = null ; this .width = 0 ; this .height = 0 ; this .populated = false ; this .visible = false ; this .autoHideEnabled = false ; this .contents = "" ; this .url = "" ; this .windowProperties = " toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizable,alwaysRaised,dependent,titlebar=no " ; if (arguments.length > 0 ){ this .type = " DIV " ; this .divName = arguments[ 0 ];} else { this .type = " WINDOW " ;} this .use_gebi = false ; this .use_css = false ; this .use_layers = false ; if (document.getElementById){ this .use_gebi = true ;} else if (document.all){ this .use_css = true ;} else if (document.layers){ this .use_layers = true ;} else { this .type = " WINDOW " ;} this .offsetX = 0 ; this .offsetY = 0 ; this .getXYPosition = PopupWindow_getXYPosition; this .populate = PopupWindow_populate; this .setUrl = PopupWindow_setUrl; this .setWindowProperties = PopupWindow_setWindowProperties; this .refresh = PopupWindow_refresh; this .showPopup = PopupWindow_showPopup; this .hidePopup = PopupWindow_hidePopup; this .setSize = PopupWindow_setSize; this .isClicked = PopupWindow_isClicked; this .autoHide = PopupWindow_autoHide; this .hideIfNotClicked = PopupWindow_hideIfNotClicked;}
44
45
46 /* SOURCE FILE: ColorPicker2.js */
47
48 ColorPicker_targetInput = null ;
49 function ColorPicker_writeDiv(){document.writeln( " <DIV ID=\ " colorPickerDiv\ " STYLE=\ " position:absolute;visibility:hidden;\ " > </DIV> " );}
50 function ColorPicker_show(anchorname){ this .showPopup(anchorname);}
51 function ColorPicker_pickColor(color,obj){obj.hidePopup();pickColor(color);}
52 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;}
53 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);}
54 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;}
55 function ColorPicker(){ var windowMode = false ; if (arguments.length == 0 ){ var divname = " colorPickerDiv " ;} else if (arguments[ 0 ] == " window " ){ var divname = '' ;windowMode = true ;} else { var divname = arguments[ 0 ];} if (divname != "" ){ var cp = new PopupWindow(divname);} else { var cp = new PopupWindow();cp.setSize( 225 , 250 );}cp.currentValue = " #FFFFFF " ;cp.writeDiv = ColorPicker_writeDiv;cp.highlightColor = ColorPicker_highlightColor;cp.show = ColorPicker_show;cp.select = ColorPicker_select; var colors = new Array( " #000000 " , " #000033 " , " #000066 " , " #000099 " , " #0000CC " , " #0000FF " , " #330000 " , " #330033 " , " #330066 " , " #330099 " , " #3300CC " ,
56 " #3300FF " , " #660000 " , " #660033 " , " #660066 " , " #660099 " , " #6600CC " , " #6600FF " , " #990000 " , " #990033 " , " #990066 " , " #990099 " ,
57 " #9900CC " , " #9900FF " , " #CC0000 " , " #CC0033 " , " #CC0066 " , " #CC0099 " , " #CC00CC " , " #CC00FF " , " #FF0000 " , " #FF0033 " , " #FF0066 " ,
58 " #FF0099 " , " #FF00CC " , " #FF00FF " , " #003300 " , " #003333 " , " #003366 " , " #003399 " , " #0033CC " , " #0033FF " , " #333300 " , " #333333 " ,
59 " #333366 " , " #333399 " , " #3333CC " , " #3333FF " , " #663300 " , " #663333 " , " #663366 " , " #663399 " , " #6633CC " , " #6633FF " , " #993300 " ,
60 " #993333 " , " #993366 " , " #993399 " , " #9933CC " , " #9933FF " , " #CC3300 " , " #CC3333 " , " #CC3366 " , " #CC3399 " , " #CC33CC " , " #CC33FF " ,
61 " #FF3300 " , " #FF3333 " , " #FF3366 " , " #FF3399 " , " #FF33CC " , " #FF33FF " , " #006600 " , " #006633 " , " #006666 " , " #006699 " , " #0066CC " ,
62 " #0066FF " , " #336600 " , " #336633 " , " #336666 " , " #336699 " , " #3366CC " , " #3366FF " , " #666600 " , " #666633 " , " #666666 " , " #666699 " ,
63 " #6666CC " , " #6666FF " , " #996600 " , " #996633 " , " #996666 " , " #996699 " , " #9966CC " , " #9966FF " , " #CC6600 " , " #CC6633 " , " #CC6666 " ,
64 " #CC6699 " , " #CC66CC " , " #CC66FF " , " #FF6600 " , " #FF6633 " , " #FF6666 " , " #FF6699 " , " #FF66CC " , " #FF66FF " , " #009900 " , " #009933 " ,
65 " #009966 " , " #009999 " , " #0099CC " , " #0099FF " , " #339900 " , " #339933 " , " #339966 " , " #339999 " , " #3399CC " , " #3399FF " , " #669900 " ,
66 " #669933 " , " #669966 " , " #669999 " , " #6699CC " , " #6699FF " , " #999900 " , " #999933 " , " #999966 " , " #999999 " , " #9999CC " , " #9999FF " ,
67 " #CC9900 " , " #CC9933 " , " #CC9966 " , " #CC9999 " , " #CC99CC " , " #CC99FF " , " #FF9900 " , " #FF9933 " , " #FF9966 " , " #FF9999 " , " #FF99CC " ,
68 " #FF99FF " , " #00CC00 " , " #00CC33 " , " #00CC66 " , " #00CC99 " , " #00CCCC " , " #00CCFF " , " #33CC00 " , " #33CC33 " , " #33CC66 " , " #33CC99 " ,
69 " #33CCCC " , " #33CCFF " , " #66CC00 " , " #66CC33 " , " #66CC66 " , " #66CC99 " , " #66CCCC " , " #66CCFF " , " #99CC00 " , " #99CC33 " , " #99CC66 " ,
70 " #99CC99 " , " #99CCCC " , " #99CCFF " , " #CCCC00 " , " #CCCC33 " , " #CCCC66 " , " #CCCC99 " , " #CCCCCC " , " #CCCCFF " , " #FFCC00 " , " #FFCC33 " ,
71 " #FFCC66 " , " #FFCC99 " , " #FFCCCC " , " #FFCCFF " , " #00FF00 " , " #00FF33 " , " #00FF66 " , " #00FF99 " , " #00FFCC " , " #00FFFF " , " #33FF00 " ,
72 " #33FF33 " , " #33FF66 " , " #33FF99 " , " #33FFCC " , " #33FFFF " , " #66FF00 " , " #66FF33 " , " #66FF66 " , " #66FF99 " , " #66FFCC " , " #66FFFF " ,
73 " #99FF00 " , " #99FF33 " , " #99FF66 " , " #99FF99 " , " #99FFCC " , " #99FFFF " , " #CCFF00 " , " #CCFF33 " , " #CCFF66 " , " #CCFF99 " , " #CCFFCC " ,
74 " #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="#" onClick=" ' + windowRef + ' ColorPicker_pickColor(\ '' +colors[i]+ ' \ ' , ' + windowRef + ' window.popupWindowObjects[ ' + cp.index + ' ]);return false;" ' + mo + ' STYLE="text-decoration:none;"> </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;}
75
76
77
2 // Author: Matt Kruse <matt@mattkruse.com>
3 // WWW: http://www.mattkruse.com/
4 //
5 // NOTICE: You may use this code for any purpose, commercial or
6 // private, without any further permission from the author. You may
7 // remove this notice from your final code if you wish, however it is
8 // appreciated by the author if at least my web site address is kept.
9 //
10 // You may *NOT* re-distribute this code in any way except through its
11 // use. That means, you can include it in your product, or your web
12 // site, or any other form where the code is actually being used. You
13 // may not put the plain javascript up on your site for download or
14 // include it in your javascript libraries for download.
15 // If you wish to share this code with others, please just point them
16 // to the URL instead.
17 // Please DO NOT link directly to my .js files from your site. Copy
18 // the files to your server and use them there. Thank you.
19 // ===================================================================
20
21 /* SOURCE FILE: AnchorPosition.js */
22 function getAnchorPosition(anchorname){ var useWindow = false ; var coordinates = new Object(); var x = 0 ,y = 0 ; var use_gebi = false , use_css = false , use_layers = false ; if (document.getElementById){use_gebi = true ;} else if (document.all){use_css = true ;} else if (document.layers){use_layers = true ;} if (use_gebi && document.all){x = AnchorPosition_getPageOffsetLeft(document.all[anchorname]);y = AnchorPosition_getPageOffsetTop(document.all[anchorname]);} else if (use_gebi){ var o = document.getElementById(anchorname);x = AnchorPosition_getPageOffsetLeft(o);y = AnchorPosition_getPageOffsetTop(o);} else if (use_css){x = AnchorPosition_getPageOffsetLeft(document.all[anchorname]);y = AnchorPosition_getPageOffsetTop(document.all[anchorname]);} else if (use_layers){ var found = 0 ; for ( var i = 0 ;i < document.anchors.length;i ++ ){ if (document.anchors[i].name == anchorname){found = 1 ; break ;}} if (found == 0 ){coordinates.x = 0 ;coordinates.y = 0 ; return coordinates;}x = document.anchors[i].x;y = document.anchors[i].y;} else {coordinates.x = 0 ;coordinates.y = 0 ; return coordinates;}coordinates.x = x;coordinates.y = y; return coordinates;}
23 function getAnchorWindowPosition(anchorname){ var coordinates = getAnchorPosition(anchorname); var x = 0 ; var y = 0 ; if (document.getElementById){ if (isNaN(window.screenX)){x = coordinates.x - document.body.scrollLeft + window.screenLeft;y = coordinates.y - document.body.scrollTop + window.screenTop;} else {x = coordinates.x + window.screenX + (window.outerWidth - window.innerWidth) - window.pageXOffset;y = coordinates.y + window.screenY + (window.outerHeight - 24 - window.innerHeight) - window.pageYOffset;}} else if (document.all){x = coordinates.x - document.body.scrollLeft + window.screenLeft;y = coordinates.y - document.body.scrollTop + window.screenTop;} else if (document.layers){x = coordinates.x + window.screenX + (window.outerWidth - window.innerWidth) - window.pageXOffset;y = coordinates.y + window.screenY + (window.outerHeight - 24 - window.innerHeight) - window.pageYOffset;}coordinates.x = x;coordinates.y = y; return coordinates;}
24 function AnchorPosition_getPageOffsetLeft(el){ var ol = el.offsetLeft; while ((el = el.offsetParent) != null ){ol += el.offsetLeft;} return ol;}
25 function AnchorPosition_getWindowOffsetLeft(el){ return AnchorPosition_getPageOffsetLeft(el) - document.body.scrollLeft;}
26 function AnchorPosition_getPageOffsetTop(el){ var ot = el.offsetTop; while ((el = el.offsetParent) != null ){ot += el.offsetTop;} return ot;}
27 function AnchorPosition_getWindowOffsetTop(el){ return AnchorPosition_getPageOffsetTop(el) - document.body.scrollTop;}
28
29 /* SOURCE FILE: PopupWindow.js */
30 function PopupWindow_getXYPosition(anchorname){ var coordinates; if ( this .type == " WINDOW " ){coordinates = getAnchorWindowPosition(anchorname);} else {coordinates = getAnchorPosition(anchorname);} this .x = coordinates.x; this .y = coordinates.y;}
31 function PopupWindow_setSize(width,height){ this .width = width; this .height = height;}
32 function PopupWindow_populate(contents){ this .contents = contents; this .populated = false ;}
33 function PopupWindow_setUrl(url){ this .url = url;}
34 function PopupWindow_setWindowProperties(props){ this .windowProperties = props;}
35 function PopupWindow_refresh(){ if ( this .divName != null ){ if ( this .use_gebi){document.getElementById( this .divName).innerHTML = this .contents;} else if ( this .use_css){document.all[ this .divName].innerHTML = this .contents;} else if ( this .use_layers){ var d = document.layers[ this .divName];d.document.open();d.document.writeln( this .contents);d.document.close();}} else { if ( this .popupWindow != null && ! this .popupWindow.closed){ if ( this .url != "" ){ this .popupWindow.location.href = this .url;} else { this .popupWindow.document.open(); this .popupWindow.document.writeln( this .contents); this .popupWindow.document.close();} this .popupWindow.focus();}}}
36 function PopupWindow_showPopup(anchorname){ this .getXYPosition(anchorname); this .x += this .offsetX; this .y += this .offsetY; if ( ! this .populated && ( this .contents != "" )){ this .populated = true ; this .refresh();} if ( this .divName != null ){ if ( this .use_gebi){document.getElementById( this .divName).style.left = this .x + " px " ;document.getElementById( this .divName).style.top = this .y;document.getElementById( this .divName).style.visibility = " visible " ;} else if ( this .use_css){document.all[ this .divName].style.left = this .x;document.all[ this .divName].style.top = this .y;document.all[ this .divName].style.visibility = " visible " ;} else if ( this .use_layers){document.layers[ this .divName].left = this .x;document.layers[ this .divName].top = this .y;document.layers[ this .divName].visibility = " visible " ;}} else { if ( this .popupWindow == null || this .popupWindow.closed){ if ( this .x < 0 ){ this .x = 0 ;} if ( this .y < 0 ){ this .y = 0 ;} if (screen && screen.availHeight){ if (( this .y + this .height) > screen.availHeight){ this .y = screen.availHeight - this .height;}} if (screen && screen.availWidth){ if (( this .x + this .width) > screen.availWidth){ this .x = screen.availWidth - this .width;}} var avoidAboutBlank = window.opera || ( document.layers && ! navigator.mimeTypes[ ' * ' ]) || navigator.vendor == ' KDE ' || ( document.childNodes && ! document.all && ! navigator.taintEnabled); this .popupWindow = window.open(avoidAboutBlank ? "" : " about:blank " , " window_ " + anchorname, this .windowProperties + " ,width= " + this .width + " ,height= " + this .height + " ,screenX= " + this .x + " ,left= " + this .x + " ,screenY= " + this .y + " ,top= " + this .y + "" );} this .refresh();}}
37 function PopupWindow_hidePopup(){ if ( this .divName != null ){ if ( this .use_gebi){document.getElementById( this .divName).style.visibility = " hidden " ;} else if ( this .use_css){document.all[ this .divName].style.visibility = " hidden " ;} else if ( this .use_layers){document.layers[ this .divName].visibility = " hidden " ;}} else { if ( this .popupWindow && ! this .popupWindow.closed){ this .popupWindow.close(); this .popupWindow = null ;}}}
38 function PopupWindow_isClicked(e){ if ( this .divName != null ){ if ( this .use_layers){ var clickX = e.pageX; var clickY = e.pageY; var t = document.layers[ this .divName]; if ((clickX > t.left) && (clickX < t.left + t.clip.width) && (clickY > t.top) && (clickY < t.top + t.clip.height)){ return true ;} else { return false ;}} else if (document.all){ var t = window.event.srcElement; while (t.parentElement != null ){ if (t.id == this .divName){ return true ;}t = t.parentElement;} return false ;} else if ( this .use_gebi && e){ var t = e.originalTarget; while (t.parentNode != null ){ if (t.id == this .divName){ return true ;}t = t.parentNode;} return false ;} return false ;} return false ;}
39 function PopupWindow_hideIfNotClicked(e){ if ( this .autoHideEnabled && ! this .isClicked(e)){ this .hidePopup();}}
40 function PopupWindow_autoHide(){ this .autoHideEnabled = true ;}
41 function PopupWindow_hidePopupWindows(e){ for ( var i = 0 ;i < popupWindowObjects.length;i ++ ){ if (popupWindowObjects[i] != null ){ var p = popupWindowObjects[i];p.hideIfNotClicked(e);}}}
42 function PopupWindow_attachListener(){ if (document.layers){document.captureEvents(Event.MOUSEUP);}window.popupWindowOldEventListener = document.onmouseup; if (window.popupWindowOldEventListener != null ){document.onmouseup = new Function( " window.popupWindowOldEventListener();PopupWindow_hidePopupWindows(); " );} else {document.onmouseup = PopupWindow_hidePopupWindows;}}
43 function PopupWindow(){ if ( ! window.popupWindowIndex){window.popupWindowIndex = 0 ;} if ( ! window.popupWindowObjects){window.popupWindowObjects = new Array();} if ( ! window.listenerAttached){window.listenerAttached = true ;PopupWindow_attachListener();} this .index = popupWindowIndex ++ ;popupWindowObjects[ this .index] = this ; this .divName = null ; this .popupWindow = null ; this .width = 0 ; this .height = 0 ; this .populated = false ; this .visible = false ; this .autoHideEnabled = false ; this .contents = "" ; this .url = "" ; this .windowProperties = " toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizable,alwaysRaised,dependent,titlebar=no " ; if (arguments.length > 0 ){ this .type = " DIV " ; this .divName = arguments[ 0 ];} else { this .type = " WINDOW " ;} this .use_gebi = false ; this .use_css = false ; this .use_layers = false ; if (document.getElementById){ this .use_gebi = true ;} else if (document.all){ this .use_css = true ;} else if (document.layers){ this .use_layers = true ;} else { this .type = " WINDOW " ;} this .offsetX = 0 ; this .offsetY = 0 ; this .getXYPosition = PopupWindow_getXYPosition; this .populate = PopupWindow_populate; this .setUrl = PopupWindow_setUrl; this .setWindowProperties = PopupWindow_setWindowProperties; this .refresh = PopupWindow_refresh; this .showPopup = PopupWindow_showPopup; this .hidePopup = PopupWindow_hidePopup; this .setSize = PopupWindow_setSize; this .isClicked = PopupWindow_isClicked; this .autoHide = PopupWindow_autoHide; this .hideIfNotClicked = PopupWindow_hideIfNotClicked;}
44
45
46 /* SOURCE FILE: ColorPicker2.js */
47
48 ColorPicker_targetInput = null ;
49 function ColorPicker_writeDiv(){document.writeln( " <DIV ID=\ " colorPickerDiv\ " STYLE=\ " position:absolute;visibility:hidden;\ " > </DIV> " );}
50 function ColorPicker_show(anchorname){ this .showPopup(anchorname);}
51 function ColorPicker_pickColor(color,obj){obj.hidePopup();pickColor(color);}
52 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;}
53 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);}
54 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;}
55 function ColorPicker(){ var windowMode = false ; if (arguments.length == 0 ){ var divname = " colorPickerDiv " ;} else if (arguments[ 0 ] == " window " ){ var divname = '' ;windowMode = true ;} else { var divname = arguments[ 0 ];} if (divname != "" ){ var cp = new PopupWindow(divname);} else { var cp = new PopupWindow();cp.setSize( 225 , 250 );}cp.currentValue = " #FFFFFF " ;cp.writeDiv = ColorPicker_writeDiv;cp.highlightColor = ColorPicker_highlightColor;cp.show = ColorPicker_show;cp.select = ColorPicker_select; var colors = new Array( " #000000 " , " #000033 " , " #000066 " , " #000099 " , " #0000CC " , " #0000FF " , " #330000 " , " #330033 " , " #330066 " , " #330099 " , " #3300CC " ,
56 " #3300FF " , " #660000 " , " #660033 " , " #660066 " , " #660099 " , " #6600CC " , " #6600FF " , " #990000 " , " #990033 " , " #990066 " , " #990099 " ,
57 " #9900CC " , " #9900FF " , " #CC0000 " , " #CC0033 " , " #CC0066 " , " #CC0099 " , " #CC00CC " , " #CC00FF " , " #FF0000 " , " #FF0033 " , " #FF0066 " ,
58 " #FF0099 " , " #FF00CC " , " #FF00FF " , " #003300 " , " #003333 " , " #003366 " , " #003399 " , " #0033CC " , " #0033FF " , " #333300 " , " #333333 " ,
59 " #333366 " , " #333399 " , " #3333CC " , " #3333FF " , " #663300 " , " #663333 " , " #663366 " , " #663399 " , " #6633CC " , " #6633FF " , " #993300 " ,
60 " #993333 " , " #993366 " , " #993399 " , " #9933CC " , " #9933FF " , " #CC3300 " , " #CC3333 " , " #CC3366 " , " #CC3399 " , " #CC33CC " , " #CC33FF " ,
61 " #FF3300 " , " #FF3333 " , " #FF3366 " , " #FF3399 " , " #FF33CC " , " #FF33FF " , " #006600 " , " #006633 " , " #006666 " , " #006699 " , " #0066CC " ,
62 " #0066FF " , " #336600 " , " #336633 " , " #336666 " , " #336699 " , " #3366CC " , " #3366FF " , " #666600 " , " #666633 " , " #666666 " , " #666699 " ,
63 " #6666CC " , " #6666FF " , " #996600 " , " #996633 " , " #996666 " , " #996699 " , " #9966CC " , " #9966FF " , " #CC6600 " , " #CC6633 " , " #CC6666 " ,
64 " #CC6699 " , " #CC66CC " , " #CC66FF " , " #FF6600 " , " #FF6633 " , " #FF6666 " , " #FF6699 " , " #FF66CC " , " #FF66FF " , " #009900 " , " #009933 " ,
65 " #009966 " , " #009999 " , " #0099CC " , " #0099FF " , " #339900 " , " #339933 " , " #339966 " , " #339999 " , " #3399CC " , " #3399FF " , " #669900 " ,
66 " #669933 " , " #669966 " , " #669999 " , " #6699CC " , " #6699FF " , " #999900 " , " #999933 " , " #999966 " , " #999999 " , " #9999CC " , " #9999FF " ,
67 " #CC9900 " , " #CC9933 " , " #CC9966 " , " #CC9999 " , " #CC99CC " , " #CC99FF " , " #FF9900 " , " #FF9933 " , " #FF9966 " , " #FF9999 " , " #FF99CC " ,
68 " #FF99FF " , " #00CC00 " , " #00CC33 " , " #00CC66 " , " #00CC99 " , " #00CCCC " , " #00CCFF " , " #33CC00 " , " #33CC33 " , " #33CC66 " , " #33CC99 " ,
69 " #33CCCC " , " #33CCFF " , " #66CC00 " , " #66CC33 " , " #66CC66 " , " #66CC99 " , " #66CCCC " , " #66CCFF " , " #99CC00 " , " #99CC33 " , " #99CC66 " ,
70 " #99CC99 " , " #99CCCC " , " #99CCFF " , " #CCCC00 " , " #CCCC33 " , " #CCCC66 " , " #CCCC99 " , " #CCCCCC " , " #CCCCFF " , " #FFCC00 " , " #FFCC33 " ,
71 " #FFCC66 " , " #FFCC99 " , " #FFCCCC " , " #FFCCFF " , " #00FF00 " , " #00FF33 " , " #00FF66 " , " #00FF99 " , " #00FFCC " , " #00FFFF " , " #33FF00 " ,
72 " #33FF33 " , " #33FF66 " , " #33FF99 " , " #33FFCC " , " #33FFFF " , " #66FF00 " , " #66FF33 " , " #66FF66 " , " #66FF99 " , " #66FFCC " , " #66FFFF " ,
73 " #99FF00 " , " #99FF33 " , " #99FF66 " , " #99FF99 " , " #99FFCC " , " #99FFFF " , " #CCFF00 " , " #CCFF33 " , " #CCFF66 " , " #CCFF99 " , " #CCFFCC " ,
74 " #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="#" onClick=" ' + windowRef + ' ColorPicker_pickColor(\ '' +colors[i]+ ' \ ' , ' + windowRef + ' window.popupWindowObjects[ ' + cp.index + ' ]);return false;" ' + mo + ' STYLE="text-decoration:none;"> </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;}
75
76
77
代码
1
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3
4 < head >
5 < meta content ="text/html; charset=utf-8" http-equiv ="Content-Type" />
6 < title > 颜色选择器 Color Picker,Internet Explorer,Firefox,Opera,Safar,Ace Explorer,Avant Browser,Flock,Google Chrome,Konqueror,Netscape,SeaMonkey </ title >
7 < meta name ="Author" content ="Geovin Du 塗聚文" />
8 < meta name ="Keywords" content ="Geovin Du 塗聚文" />
9 < meta name ="Description" content ="Geovin Du 塗聚文" />
10
11 < script type ="text/javascript" language ="javascript" src ="ColorPicker2.js" ></ script >
12 < script type ="text/javascript" language ="javascript" >
13 var cp = new ColorPicker( ' window ' ); // Popup window
14 var cp2 = new ColorPicker(); // DIV style
15 </ script >
16
17 </ head >
18
19 < body >
20 < form >
21 < table border ="1" >
22 < tr >
23 < td >
24 This popup uses a "window" popup. Use this < br />
25 For browsers that don't support DHTML. < br />
26
27 Color: < input type ="text" name ="color" size ="20" value ="" /> < a href ="#" onclick ="cp.select(document.forms[0].color,'pick');return false;" name ="pick" id ="pick" > Pick </ a >
28 </ td >
29 </ tr >
30 </ table >
31 < br />
32 < table border ="1" >
33 < tr >
34 < td >
35 This popup uses a DHTML "layer". It looks < br />
36
37 nicer, but won't work in older browsers and < br />
38 The color popup won't display over some form < br />
39 elements in some browsers! < br />
40 Color: < input type ="text" name ="color2" size ="20" value ="" /> < a href ="#" onclick ="cp2.select(document.forms[0].color2,'pick2');return false;" name ="pick2" id ="pick2" > Pick </ a >
41 </ td >
42 </ tr >
43
44 </ table >
45 </ form >
46
47 < script type ="text/javascript" language ="javascript" > cp.writeDiv() </ script >
48 </ body >
49
50 </ html >
51
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3
4 < head >
5 < meta content ="text/html; charset=utf-8" http-equiv ="Content-Type" />
6 < title > 颜色选择器 Color Picker,Internet Explorer,Firefox,Opera,Safar,Ace Explorer,Avant Browser,Flock,Google Chrome,Konqueror,Netscape,SeaMonkey </ title >
7 < meta name ="Author" content ="Geovin Du 塗聚文" />
8 < meta name ="Keywords" content ="Geovin Du 塗聚文" />
9 < meta name ="Description" content ="Geovin Du 塗聚文" />
10
11 < script type ="text/javascript" language ="javascript" src ="ColorPicker2.js" ></ script >
12 < script type ="text/javascript" language ="javascript" >
13 var cp = new ColorPicker( ' window ' ); // Popup window
14 var cp2 = new ColorPicker(); // DIV style
15 </ script >
16
17 </ head >
18
19 < body >
20 < form >
21 < table border ="1" >
22 < tr >
23 < td >
24 This popup uses a "window" popup. Use this < br />
25 For browsers that don't support DHTML. < br />
26
27 Color: < input type ="text" name ="color" size ="20" value ="" /> < a href ="#" onclick ="cp.select(document.forms[0].color,'pick');return false;" name ="pick" id ="pick" > Pick </ a >
28 </ td >
29 </ tr >
30 </ table >
31 < br />
32 < table border ="1" >
33 < tr >
34 < td >
35 This popup uses a DHTML "layer". It looks < br />
36
37 nicer, but won't work in older browsers and < br />
38 The color popup won't display over some form < br />
39 elements in some browsers! < br />
40 Color: < input type ="text" name ="color2" size ="20" value ="" /> < a href ="#" onclick ="cp2.select(document.forms[0].color2,'pick2');return false;" name ="pick2" id ="pick2" > Pick </ a >
41 </ td >
42 </ tr >
43
44 </ table >
45 </ form >
46
47 < script type ="text/javascript" language ="javascript" > cp.writeDiv() </ script >
48 </ body >
49
50 </ html >
51