Eigene Selectbox v1.0

womstar

womstar

Lounge-Member
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:

PHP: 
<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>

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.

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
 
ich hab ja auch kein mac, somit kann ich nicht testen was da läuft und was nicht.

wird denn nichts angezeigt? also wird die box net angezeigt?
 
schönschön, gibts das auch mit size="1"? oder ist das noch in planung?

ps. was ist ein lable? meist du nicht label?;)
 
wozu size 1?
es ns4.7 unterstützt die box doch garnet.

und schön das du unterstützender teilhaber der rechtschreibreform bist.
wird natürlich in der nächsten version berücksichtig ;)
 
hallo zusammen,

was könnte man machen, damit sowas möglich ist?

->

<script>
box = new selectBox("meineselectbox",120,19);
box.addValues('<img src="http://forum.jswelt.de/tutorials-javascript/..." /> DSL','t_dsl');
</script>


...das html-img sollte geparst, und nicht am browser als text ausgegeben werden!


grüsse, jan
 
@M@te: dir ist hoffentlich klar, dass dieser Thread tot ist...

@jmar: da zur Darstellung <input>s verwendet werden, wird HTML direkt als Text dargestellt und nicht geparst.

@all: das Skript ist alt und deswegen auch nicht zur Verwendung empfehlenswert!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben