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:


    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

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

    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!

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

    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!

  • 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...

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