web output :: JavaScript StyledForms

JavaScript StyledForms

Diese JavaScript Klasse ist mein Versuch ein ewiges Ärgernis unserer Designer aus der Welt zu schaffen:
Viele Formularelemente sind nicht, oder nur schlecht, über CSS stylebar.

Begonnen habe ich in der Version 0.1 mit den 3 Elementen die am schlechtesten stylebar sind:

  • Die Selectbox
  • Die Checkboxen
  • und die Radiobuttons

Eingebunden wird das ganze so einfach wie möglich ohne dabei die notwendige Flexilität ausser Acht zu lassen. Ich habe lange überlegt das Script automatisch auf alle Formulare im Dokument loszulassen, habe mich dann aber dagegen entschieden, da das zu einem zu Großen Mangel an Flexibilität führen würde. Daher erzeuge ich bei window.onload() oder einem anderen Event (bevorzugt vor onload) eine neue Instanz der Klasse und übergebe als einzigen Parameter die ID des Formulars, das "angehübscht" werden soll:



<script language="JavaScript" type="text/javascript" src="js/niceForm.js"></script>
<script language="JavaScript" type="text/javascript">

window.onload = function(){
niceForm = new JsStyledForm('idOfTheForm');
}

</script>

Alle grafischen Anpassung könnt Ihr in der beiliegenden CSS Datei: "niceform.css" durchführen

Das gute Stück wurde in folgenden Umgebungen getestet:

  • Windows
    • Firefox 1.5
    • IE 7 Beta 2
    • IE 6
    • IE 5.5
    • IE 5.01 (Hier ist ein Bug im CSS - das padding-left in den Labels wird nicht unterstützt - gibt es da einen Hack/Workaround? - Das JS tut was es soll)
    • Opera 8.02
  • MAC OS X
    • Firefox 1.5
    • Safari 2.03
    • IE 5.02 MAC (Funktioniert nicht, aber ohne Fehlermeldung (gibt es eigentlich ein deutsches äquivalent zu "degrades silently"?))
  • Linux (Ubuntu)
    • Firefox 1.07
Eine funktionierende Demo findet Ihr hier
Runterladen könnt Ihr Euch die Files hier: JsStyledForm_0.1.zip

more

EntryID: