About Maik Vlcek Follow me on twitter
Themenschwerpunkte dieses Blogs:

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

Custom Frm Elements
Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • MisterWong
  • Digg

Sorry, this entry is only available in Deutsch.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Y!GG
  • MisterWong
  • Facebook
  • email
  • del.icio.us
  • Digg
  • StumbleUpon
  • Technorati
  • LinkedIn
  • Reddit
  • Twitter
Monster-Me eating knowledge
25 Kommentare RSS Icon
Trackback URL
Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. 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. 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. 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. 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. 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. 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. Hi. Super script!!! Wie siehts denn mit mootools 1.2 aus? Release Date?
    Jörn

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

    Vielleicht hilft dir noch:
    http://www.cult-f.net/2007/12/14/elselect/

    und
    http://developer.yahoo.com/yui/examples/button/btn_example07.html (menu 2, da gehen pfeiltasten und enter, nur ist leider nicht mootools aber eventuell bekommt man die idee dahinter)

    gruß
    harald

  12. harald2k

    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

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

  14. harald2k

    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

  15. TobSnyder

    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

  16. 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 :)

  17. 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 :)

  18. TobSnyder

    Danke für die schnellen Infos!

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

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

  20. TobSnyder

    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.

  21. 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]

  22. Peter

    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?

top top