LinkBack URL
About LinkBacks
Hallöle.
Für alle die mal eine andere Selectbox haben wollen, als immer diese Standard Box, für die hätte ich hier was ansehnlicheres.
Diese Box ist voll einsatzfähig für HTML-Formulare und über den jeweiligen selbst definierten Namen über JavaScript sowie PHP etc. ansprechbar.
Die Box kann an beliebiger Stelle instanziert werden.
und über die eigene mitgebrachte Methode addValues([lable],[value]) können beliebig viele Einträge der Box hinzugefügt werden.
Die beiden Images für das Werte-Scrollen können leicht ausgetauscht werden und es können noch zusätzliche Eigenschaften verändert und angegeben werden.
Die Kompatibilität ist momentan:
ns6, opera 5-6-7 , mozilla und natürlich der IE 5-6
Nun zum Code:
Und hier zum mal rein schauen, einfach mal was Eintragen und Auswählen und abschicken. Das Formular ist auf GET gestellt damit ihr die Variablen in der Adressleiste seht.PHP-Code:<html>
<head>
<script>
selectBox = function(selectName,boxWidth,boxHeight) {
/*
** selectbox v1.0
** © 2004 robert engelhardt
** internetagentur more style berlin
** [URL]www.more-style.de[/URL]
*/
// Eigenschaften
//
var staticFontSize = new Number(12); // Textfeld Schriftgröße
var staticFontFace = new String("arial"); // Textfeld Schriftart
var staticBorderColor = new String("#979797"); // Textfeld Rahmenfarbe
var imageWidth = new Number(19);
var img_up_mout = new String("up.gif"); // image up-scroll mouseout
var img_up_mover = new String("up2.gif"); // image up-scroll mouseover
var img_down_mout = new String("down.gif"); // image down-scroll mouseout
var img_down_mover = new String("down2.gif"); // image down-scroll mouseover
// Ab hier nicht verändern!
//
var output = new String();
var spanRandId = new String(Math.floor(Math.random()*10000000));
var selectRandId = new String(Math.floor(Math.random()*10000000));
var imagesRandId = new String(Math.floor(Math.random()*10000000));
output += "<table cellspacing='0px' cellpadding='0px'>";
output += "<tr>";
output += "<td rowspan='2'>";
output += "<span id='"+spanRandId+"'>";
output += "<input type='text' style='";
output += "width:"+(boxWidth-imageWidth)+"px;";
output += "font:"+staticFontSize+"px "+staticFontFace+";";
output += "border:1px solid "+staticBorderColor+";";
output += "height:"+boxHeight+"px;cursor:default' ";
output += "id='_"+selectRandId+"_1' readonly>";
output += "<input type='hidden' id='_"+selectRandId+"_2' name='"+selectName+"'>";
output += "</span>";
output += "</td>";
output += "<td valign='bottom'>";
output += "<img src='"+img_up_mout+"' name='"+imagesRandId+"_1' ";
output += "onmouseover=\"this.src='"+img_up_mover+"'\" ";
output += "onmouseout=\"this.src='"+img_up_mout+"'\" ";
output += "onclick=\"document.getElementById('"+spanRandId+"').setLower()\">";
output += "</td>";
output += "</tr>";
output += "<tr>";
output += "<td valign='top'>";
output += "<img src='"+img_down_mout+"' name='"+imagesRandId+"_2' ";
output += "onmouseover=\"this.src='"+img_down_mover+"'\" ";
output += "onmouseout=\"this.src='"+img_down_mout+"'\" ";
output += "onclick=\"document.getElementById('"+spanRandId+"').setUpper()\">";
output += "</td>";
output += "</tr>";
output += "</table>";
document.write(output);
var obj = document.getElementById(spanRandId);
obj.selectedIndex = 0;
obj.spanRandId = spanRandId;
obj.selectLable = new Array();
obj.selectValue = new Array();
obj.valueBoxId = document.getElementById("_"+selectRandId+"_1");
obj.optionBoxId = document.getElementById("_"+selectRandId+"_2");
obj.setValues = function() {
this.valueBoxId.value = this.selectLable[this.selectedIndex];
this.optionBoxId.value = this.selectValue[this.selectedIndex];
}
obj.setUpper = function() {
if(this.selectedIndex<this.selectLable.length-1) {
this.selectedIndex++;
this.setValues();
}
};
obj.setLower = function() {
if(this.selectedIndex>0) {
this.selectedIndex--;
this.setValues();
}
};
this.prototype = obj;
this.addValues = function(lable,value) {
var p = this.prototype;
p.selectLable[p.selectLable.length] = lable;
p.selectValue[p.selectValue.length] = value;
p.valueBoxId.value = p.selectLable[0];
p.optionBoxId.value = p.selectValue[0];
p = undefined;
};
obj = undefined;
output = undefined;
spanRandId = undefined;
selectRandId = undefined;
imagesRandId = undefined;
staticFontSize = undefined;
staticFontFace = undefined;
staticBorderColor = undefined;
imageWidth = undefined;
img_up_mout = undefined;
img_up_mover = undefined;
img_down_mout = undefined;
img_down_mover = undefined;
};
</script>
<style>
td,input{font:10px verdana}
</style>
</head>
<body>
<form action="index.html" method="get">
<table>
<tr>
<td width="150px"><b>Ihr Namen</b></td>
<td><input name="feld" style="border:1px solid #979797;width:120px"></td>
</tr>
<tr>
<td width="150px"><b>Ihr Internetanschluss</b></td>
<td>
<script>
box = new selectBox("meineselectbox",120,19);
box.addValues('DSL','t_dsl');
box.addValues('ISDN','isdn');
box.addValues('Moden','moden');
box.addValues('Ich habe Keinen','none');
</script>
</td>
</tr>
<tr>
<td width="150px"> </td>
<td><input type="submit" value="abschicken" style="border:1px solid #979797;background:#ffffff;width:120px"></td>
</tr>
</form>
</body>
</html>
SelectBox v1.0
Und hier das ganze noch mal zum Downloaden.
Viel Spaß damit,
und freut euch auf ein weiter Version mit ausklappbaren Optionen.
Grüße Robert
Zitieren
Lesezeichen