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

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, Netscape 7.1

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!

  • Abgelegt unter: MT
  • Erstellungsdatum: 6 Jun 2007
  • 25 Kommentare ansehen
Tags: Cascading Style Sheets (CSS) • checkbox • custom form elements • element • file input • fileupload • formular • Javascript (JS) • Mootools (MT) • radiobutton • style • styles • stylesheet

Weitere Artikel mit dem Tag Object id #235 (auszugsweise)

Typo3 - Mailformular mit eigenem CSS (per Mailformplus)

In Mailformplus einer Mailformular Extension für Typo3 kann man sein eigenes CSS und ein eigenes XHTML Template verwenden. Um ein CSS für das Formular festzulegen benötigt man nur folgendes Typoscript-Schnippet: plugin.tx_thmailformplus_pi1.stylesheetFile = fileadmin/mailformplus/styles.css.


Den ganzen Beitrag lesen »

  • Abgelegt unter: T3S
  • Erstellungsdatum: 3 Jun 2007
  • 0 Kommentare ansehen
Tags: Cascading Style Sheets (CSS) • formular • konfiguration • mailformplus • mailformular • stylesheet • TYPO3 (T3)

eigenes Stylesheet / CSS im Backend Modul der eigenen Extension in Typo3

Für alle die es auch interessiert. Es gibt die Möglichkeit, ein zusätzliches Stylesheet im Backendmodul einer selbst geschriebenen Typo3-Extension zu laden.
In der main-Funktion des Backendmoduls wird per

$this->doc = t3lib_div::makeInstance(’mediumDoc’);

eine Instanz des template-Objektes erstellt, welches einige interessane Funktionen bietet.
(Nachzulesen in der offiziellen Klassendokumentation).
Unter Anderen besitzt es die Membervariable styleSheetFile2, welche standardmäßig nicht gesetzt ist.
Und genau hier [...]


Den ganzen Beitrag lesen »

  • Abgelegt unter: EXT
  • Erstellungsdatum: 27 Mai 2007
  • 3 Kommentare ansehen
Tags: backend-modul • Cascading Style Sheets (CSS) • extension • stylesheet • TYPO3 (T3)

  • Austausch

    • mediavrog ~ Hey - leider arbeite ich nicht sehr viel mit After Effects (war für ein Uni-projekt) und kann...
    • Moritz ~ Hi, ich habe bei Google gesucht und bin auf deinem Blog gelandet. Ich habe folgenden Fehler:...
    • Geburtstagswünsche ~ ich finde das design des blogs echt klasse :) schwarz und rosa ergänzt sich echt...
    • mediavrog ~ Hast du meine Tipps 1) und 2) berücksichtigt. Wenn var_dump nichts ausgibt, dann wird wohl die...
    • Neo ~ Tja sehr mysteriös, es kommt mit var_dump gar nix, egal welche Variable ich einfüge. ich hab typo...
    • mediavrog ~ Hey, also ich habe einige Punkte feststellen können, welche Probleme bereiten könnten: 1)...

  • Mal "Danke" sagen

    Du hast ein Script von mir im Einsatz oder ein Post hat Dir sehr weitergeholfen? Schön dass ich dir eine Freude machen konnte!

    Wenn du mir dafür danken möchtest, freue ich mich über eine Spende per
    oder etwas von meinem Amazon-Wunschzettel.

    Ist dir das zu langweilig? (Rot, Adapter:Nokia 2) :)

  • Über den Autor

    Bild: Maik VlcekIch befasse mich seit 2004 mit Webdesign & Programmierung und studiere zur Zeit Medieninformatik an der HTW Dresden. Mehr »
top top