颜色选择器 Color Picker,Internet Explorer,Firefox,Opera,Safar

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 <[email protected]>
 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;">&nbsp;&nbsp;&nbsp;</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'>&nbsp;< / 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