カラーピッカーカラーピッカー、IE、Firefox、Opera、Safar_javascript のヒント-jsチュートリアル-php.cn

出典: カラーピッカー 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 コード

コードをコピーコードは次のとおりです:

// ========================================= =========================
// 著者: Matt Kruse
// WWW: http://www.mattkruse.com/
//
// 注意: このコードは、営利目的でも
// 私用でも、いかなる目的でも使用することができます。著者からの許可。
// 必要に応じて、この通知を最終コードから削除することもできますが、少なくとも私の Web サイトのアドレスが保持されていれば、作成者は
// に感謝します。
//
//
// を使用する以外の方法でこのコードを再配布することは *禁止* してください。つまり、コードを製品、Web
// サイト、またはコードが実際に使用されるその他の形式に含めることができます。
// プレーンな JavaScript をダウンロード用にサイトに置いたり、
// JavaScript ライブラリにダウンロード用に含めたりすることはできません。
// このコードを他の人と共有したい場合は、代わりに
// に URL を指定してください。
// あなたのサイトから私の .js ファイルに直接リンクしないでください。
// ファイルをサーバーにコピーし、そこで使用します。ありがとう。
// ========================================== ======================

/* ソースファイル: AnchorPosition.js */
function getAnchorPosition(anchorname){var useWindow= false;var 座標 = 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[アンカー名]);y=AnchorPosition_getPageOffsetTop(document.all[アンカー名] ]);}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[アンカー名]);y=AnchorPosition_getPageOffsetTop(document.all[アンカー名]);}else if(use_layers){var found=0;for(var i=0;i関数 getAnchorWindowPosition(アンカー名){var 座標=getAnchorPosition(アンカー名);var x=0;var y=0;if(document.getElementById){if(isNaN(window.screenX)){x=座標.x-document .body.scrollLeft window.screenLeft;y=座標.y-document.body.scrollTop window.screenTop;}else{x=座標.x window.screenX (window.outerWidth-window.innerWidth)-window.pageXOffset;y=座標.y window.screenY (window.outerHeight-24-window.innerHeight)-window.pageYOffset;}}else if(document.all){x=座標.x-document.body.scrollLeft window.screenLeft;y=座標.y-document.body.scrollTop window.screenTop;}else if(document.layers){x=座標.x window.screenX (window.outerWidth-window.innerWidth)-window.pageXOffset;y=座標.y ウィンドウ。 screenY (window.outerHeight-24-window.innerHeight)-window.pageYOffset;}coodys.x=x;coorders.y=y;戻り座標;}
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;}

/* ソースファイル: PopupWindow.js */
function PopupWindow_getXYPosition(anchorname){var 座標;if(this.type == "WINDOW"){座標 = getAnchorWindowPosition(アンカー名);}else{座標 = getAnchorPosition(アンカー名);}this.x = 座標.x;this.y = 座標.y;}
関数 PopupWindow_setSize(幅,高さ){this.width = width;this.height = height;}
関数 PopupWindow_populate(contents){this.contents = content;this.populated = false;}
関数 PopupWindow_setUrl(url){this.url = url;}
function PopupWindow_setWindowProperties(props){this.windowProperties = props;}
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();}}}
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;}}varaveAboutBlank = window.opera ||( document.layers && !navigator.mimeTypes['*']) || navigator.vendor == 'KDE' ||( document.childNodes && !document.all && !navigator.taintEnabled);this.popupWindow = window.open(avoidAboutBlank?"":"about:blank","window_" アンカー名, this.windowProperties ",width=" this.width ",height=" this.height ",screenX=" this.x ",left=" this.x ",screenY=" this.y ",top=" this. y "");}this.refresh();}}
関数 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;}}}
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;}
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) ;ifunction 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;}}
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,alwaysRaized,dependent,titlebar=no";if(arguments.length>0){this.type="DIV";this. divName = argument[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_showPopup;this.hidePop up = PopupWindow_hidePopup;this.setSize = PopupWindow_setSize;this.isClicked = PopupWindow_isClicked;this.autoHide = PopupWindow_autoHide;this.hideIfNotClicked = PopupWindow_hideIfNotClicked;}

/* SOURCE FILE: ColorPicker2.js */

ColorPicker_targetInput = null;
function ColorPicker_writeDiv(){document.writeln("

");}
関数 ColorPicker_show(anchorname){this.showPopup(anchorname);}
関数 ColorPicker_pickColor(color,obj){obj.hidePopup();pickColor(color);}
関数 pickColor (color){if(ColorPicker_targetInput==null){alert("ターゲット入力が null です。これは、「select」関数を使用しなかったか、選択した色を処理するための独自の「pickColor」関数が定義されていないことを意味します。 ");return;}ColorPicker_targetInput.value = color;}
function ColorPicker_select(inputobj,linkname){if(inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!=" textarea"){alert("colorpicker.select: 渡された入力オブジェクトは有効なフォーム入力オブジェクトではありません");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;}
function ColorPicker(){var windowMode = false;if(arguments.length==0){var divname = "colorPickerDiv";}else if(arguments[ 0] == "ウィンドウ"){var divname = '';windowMode = true;}else{var divname = argument[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",
"#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 合計 = 色。 length;var width = 18;var cp_contents = "";var windowRef =(windowMode)?"window.opener.":"";if(windowMode){cp_contents = "カラーを選択";cp_contents = "";}cp_contents = "";var use_highlight =(document.getElementById || document.all)?true:false;for(var i=0;i ';if( ((i 1)>=合計) ||(((i 1) % width) == 0)){cp_contents = "< ;/TR>";}}if(document.getElementById){var width1 = Math.floor(width/2);var width2 = width = width1;cp_contents = "";}cp_contents = "

#FFFFFF

";if(windowMode){cp_contents = "";}cp.populate(cp_contents "n");cp.offsetY = 25;cp .autoHide();return cp;}

复制代代码如下: