mootools – custom Form Elements 1.8beta: Checkboxen und Radiobuttons selbst per CSS gestalten

Update 08.01.10: Custom Form Elements hat sich weiterentwickelt und ist nun unter http://customformelements.net zu finden. Ein kleines Stück Code, welches Checkboxen und Radiobuttons (und jetzt auch viele andere Formularelemente) per Javascript durch kleine DIV-Container ersetzt, welche man dann selbst per CSS gestalten kann.

An der Funktionalität jeder Checkbox und der Radiobuttons im Formular ändert sich nichts :) . Auch Labels werden unterstützt. Es ist damit also möglich, per CSS die Styles der Elemente eines Formulars anzupassen > siehe Demoseite.

Kurzinfo:

  • custom Form Elements 1.8beta – Checkboxen und Radiobuttons selbst per CSS stylen
  • Größe ca. 17 kB (komprimiert; inkl. aller Module)
  • basiert auf mootools ab v1.1
  • benötigt folgende mootools Module
    • Core, Class,Class.Extras, Array, String, Function, Number, Element, Element.Event, Element.Filters, Element.Selectors, Window.DomReady
  • Lizenz: MIT
  • erfolgreich getestet unter: IE7+, Firefox 2+, Opera 9.02+, Chrome 3+

Features:

  • ersetzt
    • Checkboxes
    • Radiobuttons
    • Fileupload
    • Textinput (inkl. Password) und Textarea
    • Select
    • Submit/Reset/Image
  • … auf der gesamten Seite oder in einem bestimmen Element (z.B. Formular) mit einer angegebenen ID durch kleine DIV-Container
  • generiert auf Wunsch Tooltips anhand der title-Attribute
  • unterstützt Tabbing / Fokussierung
  • “unobstrusive” – ohne Javascript werden die normalen Formularfelder gezeigt
  • weiteres auf der Demoseite

Download:

Demo:

Donate / Spenden





Verbesserungsvorschläge und Kommentare sind immer willkommen!

25 Kommentare

  1. pixelthing August 14, 2008 5:56   Antworten

    That’s great news – thanks very much! I’m no cocoa developer (so sproutcore/objective-j are no good to me), and have tried and failed to build applications in extjs (damned clever – too clever), so this and mochaUI could be just the combination I’m looking for to build the admin area of our new CMS.

  2. mediavrog
    mediavrog August 14, 2008 2:44   Antworten

    Hey there,

    in fact I spent the last 2 days updating to mootools 1.2 and throwing together a more informational homepage w/ demo. There will also be a developers corner for those who want to extend it :)

    The port is almost complete, yet not 100% tested. Give me 2-3 days and i’ll upload the classes for mt 1.2.
    CFE is now also available on SourceForge – big things are happening – more infos soon..

    And thanks for this positive feedback ^^

  3. pixelthing August 14, 2008 12:23   Antworten

    Hi, Sorry to just be a whiny leacher, but I’ve tried updating the script to Mootools 1.2 and found my self out of my depth. Do you have plans to upgrade to 1.2 in the near future (your class is easily the most complete mootools form UI). We’d then love to help out with other additions such as multiple select menus, other themes etc.

  4. mediavrog
    mediavrog Juli 23, 2008 4:25   Antworten

    Hey Marc,

    ich werde mal nachsehen, wie weit die Entwicklung der 1.2er Version ist und dir Bescheid geben. Evtl kann ich dir auch schon eine Vorab-Version zukommen lassen.

    Grüße, Maik

  5. Marc Juli 22, 2008 2:33   Antworten

    Hi, ich wollte fragen wie es mit einem mootools 1.2.-Release aussieht? Kamst Du schon dazu bzw. gibt es eine Alpha, ich würde Sie gerne testen und Dir Feedback geben.

    Gruß Marc

  6. mediavrog
    mediavrog Juni 17, 2008 10:25   Antworten

    Tag auch :)

    Die cfe für mootools 1.2 sind inoffiziell bereits in Arbeit, ich habe aber leider momentan keine Zeit für deren Entwicklung da ich noch einige Belege für die Uni zu erledigen habe. Ich denke im Juli kann ich erst weiterentwickeln :/

  7. Jörn Juni 17, 2008 9:59   Antworten

    Hi. Super script!!! Wie siehts denn mit mootools 1.2 aus? Release Date?
    Jörn

  8. mediavrog
    mediavrog April 22, 2008 3:43   Antworten

    Ahoi Daniel,

    vielen Dank für den Hinweis! Ich habe es eben behoben…
    Das Problem lag tatsächlich nur in der Reihenfolge, in der die Files eingelesen wurden,
    da Reset von Submit abhängt – komisch dass sich bis jetzt noch niemand deswegen gemeldet hat :/
    Die komprimierte Version war auch betroffen…

    Nunja – Problem behoben und die Entwicklung kann weiter gehen.
    Custom Form Elements ist bald über sourceforge.net erreichbar – mit ein paar neuen Features:

    # namespaces
    # Abhängigkeiten (Dependencies)
    # …

    Falls du Support beim Einrichten brauchst, stehe ich dir gern zur Seite, da ich auch gern aus Nutzersicht eventuelle Probleme oder Hürden beim Einrichten kennen lernen möchte.

    Grüße aus Dresden ^^

    Maik

  9. Daniel Wegener April 22, 2008 2:49   Antworten

    Hi Maik,

    vielleicht bin ich einfach zu blöd – oder hab ne irgendwie verkorkste version – wenn ich jedoch die aktuelle “Full Source” ziehe (lt. Headercomment V 1.8b) meckert mein Firefox, dass die var cfeSubmit unsetted sei (Line 411). Macht ja auch sinn, da cdeSubmit erst danach deklariert wird. Reihenfolge im Source umgedreht, schon ging das ganze wieder.
    Betrifft dieser Fehler vielleicht auch die kompilierte Version?

    Beste Grüße,
    Daniel

  10. mediavrog
    mediavrog April 10, 2008 10:43   Antworten

    Hey Harald,

    danke für die Links.

    Die Selektierung der Options mittele Tasten ist in meiner Entwicklungsumgebung schon realisiert.
    (Pfeiltasten hoch/runter/ Enter/ Buchstabe für direkten Sprung)

    Die Position des Auswahlfeldes wird sich später direkt per CSS bestimmen lassen.

    Das Problem mit dem Selektieren ist eigentlich keines: Der Focus landet richtig auf dem Select-Feld, nur leider habe ich für die Ansteuerung des Felds wenn nur der Fokus gesetzt ist noch keine KeyHandler definiert – kommt in der nächsten Rev.

    Danke für deine Hinweise

    Grüße
    Maik

  11. harald2k April 10, 2008 8:31   Antworten

    na wie in deiner Demo Seite zu sehen ist.
    1. Klick mit der Maus in das Input Feld von “secrets password field”
    2. Drücke TAB, du kommst zum Input Feld von “and this one a text area”
    3. Drücke TAB, du komst zu “normale selected Box”
    4. nochmal tab , du landest nicht auf select feld

    Desweiteren fängt das sich öffnende Auswahlfeld über dem select-feld an, also es liegt oben drüber und fängt nicht genau unten drunter an wie Standard ist, aber das sollte nur eine positionsparameter sein.

    Absolut Premium, aber wahrscheinlich etwas knifflig wäre es, wenn man das erste auszuwählen Element auch per key bekommen könnte. Typisches Beispiel: Liste aller Länder, das sind 180 oder so und ich will zu “Germany”, dann tippe ich “G” , lande dann immer erst bei Gambia und gehe dann mit den Pfeiltasten zweimal runter, drücke Enter und habe Germany ausgewählt

    Gruß
    harald

  12. mediavrog
    mediavrog März 31, 2008 6:12   Antworten

    Hallo Harald,

    erstmal danke fürs Lob :) Die CFE haben schon viel Zeit und Schweiß gefressen ^^

    Zu deinen Hinweisen:

    1) Pfeiltasten hoch/runter zum Auswählen von Optionen wenn Fokus auf Select-Feld => danke für den Hinweis, das werde ich mit aufnehmen

    2) Bitte erklär nochmal kurz das Problem, da konnte ich dir nicht so recht folgen: Fokus auf Input-Feld -> “tab” -> Select-Feld wird nicht selektiert? Beschreibs einfach nochmal bitte :)

    Grüße
    Maik

  13. harald2k März 31, 2008 3:50   Antworten

    Hallo,

    super Arbeit, erstmal ein großes Lob. Es gibt aber noch einen recht großes usability Bug bei den select-Dropdown menüs. Wenn ich vorher ein normales eingabe feld hatte und jetzt, wie gewohnt zum nächsten Feld per Tab springe, wird das Feld nicht selectiert. Wenn ich dann auf dem Feld bin, kann ich nicht per Pfeiltasten hoch und runter die Einträge auswählen. Das bestätigen geht per Enter schon, dass ist sehr gut, aber die anderen beiden Sachen sind noch sehr wichtig. Wenn das funktioniert, hast du die volle Funktionalität eines normalen select-feldes hinbekommen, nur in viel schöner ;-)

    gruss
    harald

  14. TobSnyder Februar 26, 2008 12:18   Antworten

    Hi Maik,

    super danke für die neue Version. Habe leider noch ein paar weitere Bugs entdeckt. Meld dich mal bei mir, vielleicht kann ich dich mal anrufen oder wir treffen uns mal kurz?

    Viele Grüße

  15. mediavrog
    mediavrog Februar 13, 2008 4:22   Antworten

    Die neue Version ist draußen :)

    @Coffein:
    Danke!

    Und betreffend mootools 1.2:
    Es ist momentan eine Version für mootools 1.2 beta 2 in Arbeit, aber die Testphase ist noch nicht abgeschlossen.
    Demnach müsste es dann auch
    (this.options.scope || $(document.body)).getElements… sein :)

  16. Coffein Februar 1, 2008 5:52   Antworten

    Hallo Maik,

    tolles Script. Habe es gerade in meinen Bookmarks wiedergefunden und mal schnell eingebaut. Läuft bestens!

    Wahrscheinlich ist die neue Version des Scriptes schon Mootools V1.2 kompatibel, für alle die es nicht abwarten können:

    tausche in der initializeCheckboxes-Methode:
    $ES(“input[type=checkbox]”,this.options.scope || document.body)
    gegen
    (this.options.scope || document.body).getElements(“input[type=checkbox]”)

    und
    $E(“label[for=”+el.getProperty(“id”)+”]”)
    gegen
    document.body.getElements(“label[for=”+el.getProperty(“id”)+”]”)

    analog in der initializeRadiobutton-Methode.

    Ansonsten bin ich natürlich auch gespannt auf die nächste Version :)

  17. TobSnyder Januar 15, 2008 3:43   Antworten

    Danke für die schnellen Infos!

    Bin schon gespannt wenn dann die neue Version raus kommt :)

  18. mediavrog
    mediavrog Januar 14, 2008 10:37   Antworten

    Hallo TobSnyder,

    die Cutsom Form Elements befinden sich momentan schon in der Weiterentwicklung und der Zurücksetzen Button wird unterstützt.

    Die Funktionalität “alles markieren” und “alle Markierungen entfernen” werde ich mir mal näher anschauen..

    Betreffend der impliziten Labels – tatsächlich benötigt mein Script momentan das for-Attribut der Labels. In der nächsten Version werden die dann auch ohne for-Attr unterstützt, habe bitte noch ein wenig Geduld :)

    Viele Grüße

  19. TobSnyder Januar 14, 2008 12:25   Antworten

    Hi!

    Das Script gefällt mir, denn es funktioniert mit Radiobuttons und Checkboxes, sogar recht gut. Allerdings habe ich nun doch einige Probleme damit. Möchte es in meinen phpBB Skin einbinden, doch Funktionen “Alle markieren” oder “Alle Markierungen entfernen” lassen sich mit dem Skript nicht realisieren (bzw. ich weis nicht wie…). Auch ein “Zurücksetzen” Button funktioniert nicht damit (…)

    Was mir auch aufgefallen ist: steht das input element im label element, so funktioniert das skript nicht richtig. erst wenn man das label element vor oder hinter dem input element separat einbindet, funktioniert es?!

    Kann mir hierbei einer weiterhelfen ?

    Kommentar mediavrog:
    Ab der neuen Version 1.8 werden Elemente wie Checkboxen mit impliziten Labels unterstützt.

  20. mediavrog
    mediavrog Oktober 7, 2007 7:54   Antworten

    Hi there,

    actually it does support tabbing. If you split functionality correctly, tabbing will not be part of a custom form elements class. Now if you switch tabs, you’ll most likely just instantiate the custom form elements class in an onSwitchTabComplete-Handler or sth like that. Et voila – tabbing support. In my script you can also limit the scope of form elements replacement to a tab-content-div to prevent unnecessary js-calls.
    I noticed your way of dealing with focus-states (well its also accomplished by pressing tab = tabbing). I really like it and if you meant this with “tabbing”, i’d like to thank you for this hint. I think about implementing this in the next version :) Regards, Maik [mediavrog]

  21. Peter Oktober 7, 2007 5:03   Antworten

    Great script. But unfortunately it doesn’t support tabbing.
    Take a look a an old script (Not Mootools based) I made for replacing checkbox & radio fields, which supports tabbing.
    http://peterklein.rho.t3c.dk/index.php?id=62

    Maybe you can get some ideas from looking at the script?

Einen Kommentar hinterlassen