Künstliche Selectbox ohne Form

Teron Gerofied

Hey,

habe hier die Grundstruktur einer künstlichen Select-Box ohne Forms, nur in Javascript. Das ist jetzt mal der reine Code, das Ding hat kein wirkliches Design oder so, das kann man aber über CSS alles dazubauen. Man könnte auch eine hidden-Textbox dazumachen und die Werte da eintragen, keine Ahnung. Man hat da viele möglichkeiten ...

Hier mal die Klasse:

Code

Combobox = function( class ) {
		this.class = class;


		this.element;
		this.element_x;
		this.element_y;


		this.selectlist;
		this.shown = false;
		this.actuallText;
		this.actuallClassName = 'combobox'; // diesen Klassennamen kann man beliebig ändern


		this.entries = new Array();
	}

	Combobox.prototype = {

		init : function( element, entries )
		{
			this.element = element;
			this.element.className = this.actuallClassName;
			this.entries = entries;
		}	
		,
		getPosition : function()
		{
			var elem=this.element, tagname="", x=0, y=0;
			while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
			{
				y+=elem.offsetTop;
				x+=elem.offsetLeft;
				tagname=elem.tagName.toUpperCase();

				if (tagname=="BODY")
					elem=0;

				if (typeof(elem)=="object")
				if (typeof(elem.offsetParent)=="object")
					elem=elem.offsetParent;
			}
			position=new Object();
			position.x=x;
			position.y=y;

			return position;
		}
		,
		setEntry : function( newEntry )
		{
			this.hide();
			this.element.innerHTML = newEntry;
		}
		,
		show : function( element, entries )
		{
			if( element != null && entries != null )
				this.init( element, entries );
			this.element_x = this.getPosition().x;
			this.element_y = this.getPosition().y;

			if(this.element.tagName.toUpperCase() == "DIV" && !this.shown)
			{
				this.element.className += ' cur';
				this.actuallText = this.element.innerHTML;
				this.selectlist = document.createElement('UL');
				for(i = 0; i < this.entries.length; i++)
				{
					this.selectlist.innerHTML += '<li><a href="#"'+((this.entries[i][1] == this.actuallText)?' class="cur"':'')+' onclick="'+this.entries[i][0]+' '+this.class+'.setEntry(\''+this.entries[i][1]+'\')">'+this.entries[i][1]+'</a></li>';
				} 
				this.selectlist.style.top = this.element_y;
				this.selectlist.style.left = this.element_x;
				this.selectlist.style.position = 'absolute';
				this.selectlist.style.zIndex = '50';
				this.selectlist.style.marginTop = '3px';
				this.selectlist.style.marginLeft = '-4px';
				this.selectlist.style.listStyle = 'none';
				this.element.appendChild( this.selectlist );


				this.shown = true;
			}
		}
		,
		hide : function()
		{
			if(this.shown)
			{
				this.element.removeChild( this.selectlist );
				this.shown = false;
				this.element.className = this.actuallClass;
			}
		}

	}

Alles anzeigen

Um das ganze zu initialisieren muss einfach nur darunter folgendes kommen:

Code

combo = new Combobox('combo');
	entries = new Array(new Array('', 'text1'), new Array('', 'text2'), new Array('', 'text3'))

Wichtig: wenn die referenz auf das Objekt Bombobox "combo" ist (so wie hier) muss dem Konstruktor ebenfalls der String "combo" übergeben werden.

im zweidimensionalen Array "entries" werden die Einträge übermittelt ... wobei der erste wert die function ist, die die im onclick-event der einzelnen einträge steht und der zweite wert der angezeigte stringt ist

mit

div.combobox li a.cur {} kann man in css definieren, wie einträge aussehen, wenn sie markiert sind.

um das ganze nun aufzurufen nehme man:

HTML

<div onmousedown="combo.show(this, entries)">Combobox</div>

mit combo.hide() wird das ganze wieder zugemacht.

viel vergnügen

lg

Tobse

Aehm, ok, ich konnte das jetzt nicht testen aber so wie es aussieht fehl da der platz wo die momentane auswahl drin steht. Das ganze ist glaub noch etwas verbeserungswuerdig. Gut qaere es auch, wenn du es als jQuery plugin-in schreiben koenntest, dann kann man dein plugin auch mit css-selektoren einsetzen, wie z.b. $(".jsCombobox").combobox({opti:ons});

Alles in allem find ichs aber gut, dass du dir die muehe gemacht hast, mich nerven diese standard-dropdowns auch immer xD

@Alle, die das verwenden:
Vergesst nicht, auch fuer die user ohne js die funktionalitaet zu erhalten.

Teron Gerofied

Es war auch eher als Denkanstoß gedacht. Habe noch ein wenig daran rumgebastelt, vielleicht schreib ichs auch als jQuery plugin um, was sich treffen würde, da ich ja jQuery verwende.

Das Problem mit dem Erhalt der Funktionalität für nicht-JS Benutzer hab ich nicht, da praktisch meine gesamte Seite nur mit Ajax Agent und jQuery läuft. Wer da ohne Javascript ist, kommt ohnehin nicht weit xD

Gott sei dank haben die meisten Browser ja schon die Fähigkeit JavaScript richtig zu interpertieren und sogar der IE wird vielleicht in der Version 14 endlich dazu in der Lage sein, alles so auszuführen, dass man nicht für jede einzelne Version eine Extrawurst schreiben muss. (Man darf ja noch hoffen)

Tobse

Hehe, ja, der IE... Das ist halt MS. vor Jahren haben die Open-Source'ler JS eingefuehrt und JS ist sofort im Netscape, Opera und bla. Deswegen war MS gezwungen, JS einzubauen, um Webseiten weiterhin anzeigen zu koennen, fuer eine eigenentwicklung wars zu spaet. Aber da MS ja alles andere als fuer open source ist, ham sie warscheinlich die JS-Funktionen abgeaendert, ich glaub, um JS unattraktiv zu machen, weil alle aufn IE aufpassen muessen xD. Hat aber nich geklappt...

Zitat

Es war auch eher als Denkanstoß gedacht. Habe noch ein wenig daran rumgebastelt, vielleicht schreib ichs auch als jQuery plugin um, was sich treffen würde, da ich ja jQuery verwende.

Joa, evtl scheib ich auch mal eine jQuery-Version, hatte ich auch mal vor. Hatte vor langer zeit mal ein jQuery Kontextmenue geschrieben, ist aber nicht so ausgereift.

synaptic

finde gut, dass du nachdem dir gezeigt wurde wie es geht noch die transferleistung gebracht hast des für prototype zu schreiben..

hier nochma ne jquery-verrsion...

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>


<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
        function designSelects(){


    $('.designed').each(function(){
        var parent = $(this).parent()
        parent.append('<a class=\"selectLink\" href=\"javascript:void(0);\">Bitte wählen</a>');
        parent.append('<ul class=\"designedSelect\"></ul>');
        $(this).children('option').each(function(index){
            if($(this).text() != ""){
                parent.children('ul').append('<li><a href=\"javascript:void(0);\">'+$(this).text()+'</a></li>');
            }


        });
        $(this).hide();
        parent.children('.selectLink').click(function(){
            parent.children('ul').slideDown(200).addClass("activedropdown");

        });
    });

}


$(document).ready(function(){
    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("activedropdown"))
            $(".activedropdown").hide();
    });


designSelects();
    $('.designedSelect li').click(function(){
        var text = $(this).children('a').text();
        $(this).parent().parent().children('.selectLink').text(text);
        $('.designed').children('option').each(function(){
            if($(this).text() == text){
                $(this).val(text);
                $(this).parent().children("option[value=''+text+'']").attr('selected', 'selected');
            }
        });        
    });
 });    
    </script>
    <style type="text/css">
        *{
            border:0 none;
            margin:0;
            padding:0;
        }
        .designedSelect{
            display:none;
            list-style:none;
            margin:0;
            padding:3px;
            width:14%;
        }
        .designedSelect li:hover{
            background:#fefefe;
        }
        .activedropdown{
            display:block;
            position:absolute;
            background:#c1c1c1;
            border: 1px solid black;
            z-index:999;
        }
        .searchTeaser{
            width:300px; 
            border:1px solid red;
        }
    </style>
</head>


<body>
<div class="searchTeaser">
 <select class="searchSelect designed" id="select1" name="select1">
    <option>bitte wählen</option>
    <option>IT</option>
    <option>Finanzen</option>
    <option>Gesundheit</option>
</select>
</div>
<div class="searchTeaser">
 <select class="searchSelect designed" id="select2" name="select2">
    <option>bitte wählen</option>
    <option>IawdawT</option>
    <option>Findawdaanzen</option>
    <option>Gesudawdandheit</option>
</select>
</div>
<div class="searchTeaser">
 <select class="searchSelect designed" id="select3" name="select3">
    <option>bitte wählen</option>
    <option>IawdawdT</option>
    <option>Fiawdawdnanzen</option>
    <option>Geawdawdsundheit</option>
</select>
</div>


</body>
</html>

Alles anzeigen

Teron Gerofied

Naja ehrlichgesagt schreibe ich nie ganze Klassen in JavaScript. Deswegen hab ich einfach das Grundgerüst von was andrem genommen, und das so umgebaut. Wollte ehrlichgesagt einfach nur schauen ob sowas tatsächlich so komplex wäre selbst zu machen "Fleißarbeit" sozusagen ...

Tags