Jaws
02-03-2004, 22:17
In PHP und HTML kann ich ja miterweile einiges machen, in JavaScript kenn ich mich jedoch nicht sooo gut aus...
jetzt brauch ich für ein proejkt, wo der benutezr, diverse farben wählen kann, die dann gespeichert werden, einen Colorpicker....
Also hab ich mir n paar scripts zusammengebastelt.... *hehe*
erstmal hab ich die Color-Tabelle vom WYSIWYG-HTML-Area geklaut, und n paar zeieln verändert...
aber erstmal der code von der datei, mit der ich das popup öffne...
<script language="JavaScript">
function color(){
var popup = open('select_color.php', 'color', 'width=231 ,height=162');
}
function insert(selectedcolor){
document.demo.test.value += selectedcolor;
}
</script>
</head>
<body>
<form name="demo">
<textarea name="test"></textarea>
<a href="#" onclick="color(); return false">Farbe wählen</a>
</form>
</body>
html und head-tags hab ich da jetzt einfach mal weggelassen...
und das hier wäre das script des color-pickers, inclusive der ersten tabellen-zeiel mit den farben drinne...
<html STYLE="width: 238px; height: 187px"><head><title>Select Color</title>
<script language="javascript">
function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}
function Init() { // run on page load
document.body.onkeypress = _CloseOnEsc;
color = window.dialogArguments;
color = ValidateColor(color) || '000000';
View(color); // set default color
}
function View(color) { // preview color
document.all.ColorPreview.style.backgroundColor = '#' + color;
document.all.ColorHex.value = '#' + color;
}
function Set(string) { // select color
color = ValidateColor(string);
if (color == null) { alert("Invalid color code: " + string); } // invalid color
else { // valid color
View(color); // show selected color
opener.insert(document.all.ColorHex.value); // set return value
window.close(); // close dialog
}
}
function ValidateColor(string) { // return valid color code
string = string || '';
string = string + "";
string = string.toUpperCase();
chars = '0123456789ABCDEF';
out = '';
for (i=0; i<string.length; i++) { // remove invalid color chars
schar = string.charAt(i);
if (chars.indexOf(schar) != -1) { out += schar; }
}
if (out.length != 6) { return null; } // check length
return out;
}
</script>
</head>
<body bgcolor="#000000" topmargin=0 leftmargin=0 onload="Init()">
<form method=get onSubmit="Set(document.all.ColorHex.value); return false;">
<table border=0 cellspacing=0 cellpadding=4 width=100%>
<tr>
<td bgcolor="buttonface" valign=center>
<div style="background-color: #000000; padding: 1; height: 21px; width: 50px">
<div id="ColorPreview" style="height: 100%; width: 100%"></div></div></td>
<td bgcolor="buttonface" valign=center>
<input type="text" name="ColorHex" value="" size=15 style="font-size: 12px"></td>
<td bgcolor="buttonface" width=100%></td>
</tr>
</table>
<table border=0 cellspacing=1 cellpadding=0 bgcolor=#000000 style="cursor: hand;">
<tr>
<td bgcolor=#000000 onMouseOver=View('000000') onClick=Set('000000') height=10 width=10></td>
mit der Funktion (hier fett) schließ ich das window, wenn ne farbe ausgwählt ist, und geb den wert zurück an den opener...
jetzt aber mein problem:
ich hab auf der seite eben nicht nur ein solches eingabefeld, wo der benutzer eine farbe auswählen kann, sondern mehrere...
wie kann ich das jetzt machen, dass ich nicht für jedes textfeld, einen eigenen color-picker -seite erstellen muss, die nur an dieses textfeld zurückgibt?!....
meine idee war, dass ich mit dem aufruf color(); irgendwie einen parameter übergeben kann, wie zum Besipiel den feldnamen, für den man die farbe gerade aussucht (also z.B. color('textfeld1'); ), und dass dieser parameter dann in das popup mit übergeben wird...
das ist mein erstes problem!! da weiß ich nicht, wie ich das hinkrieg....
dann ist das zweite problem, wie kann ich eben diese variable im popup 'auslesen' und wieder zurück an die Funtion insert(); geben, sodass die farbe dann nur in das textfeld "textfeld1" übergeben wird....
Könnt ihr mir vielleicht weiterhelfen????
Ich wär euch sehr dankbar!!!!!
Gruß,
Toby
jetzt brauch ich für ein proejkt, wo der benutezr, diverse farben wählen kann, die dann gespeichert werden, einen Colorpicker....
Also hab ich mir n paar scripts zusammengebastelt.... *hehe*
erstmal hab ich die Color-Tabelle vom WYSIWYG-HTML-Area geklaut, und n paar zeieln verändert...
aber erstmal der code von der datei, mit der ich das popup öffne...
<script language="JavaScript">
function color(){
var popup = open('select_color.php', 'color', 'width=231 ,height=162');
}
function insert(selectedcolor){
document.demo.test.value += selectedcolor;
}
</script>
</head>
<body>
<form name="demo">
<textarea name="test"></textarea>
<a href="#" onclick="color(); return false">Farbe wählen</a>
</form>
</body>
html und head-tags hab ich da jetzt einfach mal weggelassen...
und das hier wäre das script des color-pickers, inclusive der ersten tabellen-zeiel mit den farben drinne...
<html STYLE="width: 238px; height: 187px"><head><title>Select Color</title>
<script language="javascript">
function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}
function Init() { // run on page load
document.body.onkeypress = _CloseOnEsc;
color = window.dialogArguments;
color = ValidateColor(color) || '000000';
View(color); // set default color
}
function View(color) { // preview color
document.all.ColorPreview.style.backgroundColor = '#' + color;
document.all.ColorHex.value = '#' + color;
}
function Set(string) { // select color
color = ValidateColor(string);
if (color == null) { alert("Invalid color code: " + string); } // invalid color
else { // valid color
View(color); // show selected color
opener.insert(document.all.ColorHex.value); // set return value
window.close(); // close dialog
}
}
function ValidateColor(string) { // return valid color code
string = string || '';
string = string + "";
string = string.toUpperCase();
chars = '0123456789ABCDEF';
out = '';
for (i=0; i<string.length; i++) { // remove invalid color chars
schar = string.charAt(i);
if (chars.indexOf(schar) != -1) { out += schar; }
}
if (out.length != 6) { return null; } // check length
return out;
}
</script>
</head>
<body bgcolor="#000000" topmargin=0 leftmargin=0 onload="Init()">
<form method=get onSubmit="Set(document.all.ColorHex.value); return false;">
<table border=0 cellspacing=0 cellpadding=4 width=100%>
<tr>
<td bgcolor="buttonface" valign=center>
<div style="background-color: #000000; padding: 1; height: 21px; width: 50px">
<div id="ColorPreview" style="height: 100%; width: 100%"></div></div></td>
<td bgcolor="buttonface" valign=center>
<input type="text" name="ColorHex" value="" size=15 style="font-size: 12px"></td>
<td bgcolor="buttonface" width=100%></td>
</tr>
</table>
<table border=0 cellspacing=1 cellpadding=0 bgcolor=#000000 style="cursor: hand;">
<tr>
<td bgcolor=#000000 onMouseOver=View('000000') onClick=Set('000000') height=10 width=10></td>
mit der Funktion (hier fett) schließ ich das window, wenn ne farbe ausgwählt ist, und geb den wert zurück an den opener...
jetzt aber mein problem:
ich hab auf der seite eben nicht nur ein solches eingabefeld, wo der benutzer eine farbe auswählen kann, sondern mehrere...
wie kann ich das jetzt machen, dass ich nicht für jedes textfeld, einen eigenen color-picker -seite erstellen muss, die nur an dieses textfeld zurückgibt?!....
meine idee war, dass ich mit dem aufruf color(); irgendwie einen parameter übergeben kann, wie zum Besipiel den feldnamen, für den man die farbe gerade aussucht (also z.B. color('textfeld1'); ), und dass dieser parameter dann in das popup mit übergeben wird...
das ist mein erstes problem!! da weiß ich nicht, wie ich das hinkrieg....
dann ist das zweite problem, wie kann ich eben diese variable im popup 'auslesen' und wieder zurück an die Funtion insert(); geben, sodass die farbe dann nur in das textfeld "textfeld1" übergeben wird....
Könnt ihr mir vielleicht weiterhelfen????
Ich wär euch sehr dankbar!!!!!
Gruß,
Toby