Archiv:

Latest photoblog

photoblog

Blog » Styleform jQuery-Plugin

Styleform jQuery-Plugin


[English version below!]

Mit diesem Plugin ist es möglich Checkboxen und Radiobuttons zu stylen.

Anwendung:

Einfach jedem Form-Element dessen Checkboxen und Radiobuttons gestyled werden sollen die Klasse „styleform“ anhängen. Alternativ kann das Styling auf alle oder nur ausgewählte Formulare angewandt werden:
$('form').styleForm();
$('#myForm').styleForm();

Styling:

Es kann entweder ein eigenes Stylesheet erstellt werden mit eigenen Eigenschaften für die klassen .styleRadio und .styleCheckbox was allerdings recht kompliziert ist, da es kein sauberes Standard-Stylesheet ist das angewandt werden kann. Daher empfiehlt es sich, einfach die mitgelieferten Bilder im images-Ordner so zu bearbeiten wie man es wünscht.

Bonus!

Ein iPhone Theme wird in drei größen mitgeliefert.

Bekannte Probleme:

  • Opera ignoriert die disabled Eigenschaft komplett

Wünsche:

  • Styling von select Elementen ermöglichen

Demo

http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform
http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform/iphone.html

Download

http://plugins.jquery.com/project/Styleform

English description

You can use this plugin if you want to change the default look of checkboxes and radiobuttons.

Usage:

Just add the class „styleform“ (all lowercase) to any form you want to be styled. Or you can alternatively use:
$('form').styleForm();
to apply the styling of checkboxes and radiobuttons in all forms inside a document.

Styling:

You can either create a new stylesheet with your own properties styling the .styleRadio and .styleCheckbox classes which is however quite complicated since there is no default stylesheet that can be applied yet. Or you can (the easy way) use the provided themes and edit the files inside the images folder the way you want it.

Bonus:

iPhone theme included in three different sizes (small, normal, big)!

Known issues:

  • Opera ignores the disabled state completely

Wishes:

  • Add styling of select elements

Demo

http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform
http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform/iphone.html

Download

http://plugins.jquery.com/project/Styleform

Kommentare sind geschlossen

Die Trackback-URL lautet