Ergebnis 1 bis 6 von 6

Thema: Künstliche Selectbox ohne Form

  1. #1
    Meister(in) Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Idee Künstliche Selectbox ohne Form

    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;
    			}
    		}
    	
    	}
    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-Code:
    <div onmousedown="combo.show(this, entries)">Combobox</div>
    mit combo.hide() wird das ganze wieder zugemacht.

    viel vergnügen

    lg
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

  2. #2
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Künstliche Selectbox ohne Form

    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({optins});

    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.
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  3. #3
    Meister(in)
    Themenstarter
    Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Künstliche Selectbox ohne Form

    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)
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

  4. #4
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Künstliche Selectbox ohne Form

    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...
    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.
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Künstliche Selectbox ohne Form

    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-Code:
    <!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> 
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    Meister(in)
    Themenstarter
    Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Künstliche Selectbox ohne Form

    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 ...
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

Ähnliche Themen

  1. Selectbox Value Abfragen
    Von Mike987 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 05.05.2009, 12:23
  2. Künstliche Intelligenz
    Von VR6-Tribun im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 08.11.2007, 17:07
  3. <form> innerhalb eines anderen <form> möglich?
    Von Ivanman im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 17.08.2007, 16:10
  4. form mit php ohne cgi_bin
    Von Kamishi im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 09.07.2006, 11:37
  5. Werte aus Form in Selectbox auswählen
    Von Conny im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 22.12.2005, 12:49

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •