Mighty Form Styler for jQuery

Bijna alle form elementen zijn prima te stijlen met css. De border, background, ronde hoeken (voor zover browsers die ondersteunen) van inputs, selects, textarea’s, buttons, etc zijn prima en simpel via css te stijlen. Echter sommige onderdelen kunnen niet of slechts matig gestijld worden. Denk hier bijvoorbeeld aan de dropdown van een select die niet te stijlen is of radiobuttons en checkboxen, welke beperkt en slechts in enkele browsers te stijlen zijn.

Persoonlijk vind ik dat het stijlen van elementen op je pagina alleen met css moet gebeuren. Ik vind dat javascript alleen gebruikt zou moeten worden voor het toevoegen van functionaliteit, niet van layout. Stijlen via css is ook altijd sneller dan welke javascript oplossing dan ook. Buiten dat vind ik dat native browser-elementen gewoon niet gestijld zouden moeten worden, zoals je ook je scrollbalk niet kan stijlen (op IE na dan, die dit wel beperkt mogelijk maakte). Mensen zijn gewend dat bepaalde onderdelen er op hun systeem op een bepaalde manier uit zien, het kan verwarrend zijn als elke website hier zijn eigen stijl aan geeft.

jQuery form style libraries

Toch gebeurt het regelmatig dat het stijlen van bijvoorbeeld select dropdowns wel wenselijk is, bijvoorbeeld omdat de klant dat gewoon wilt. Er zijn dan een tal van javascript libraries waarmee dit gedaan kan worden. jQuery UI is hier misschien wel de bekendste voor. Echter ben ik hier geen fan van omdat ik het te veel overhead vind om enkel het stijlen van de elementen te realiseren waarbij dat via css niet kan. Bij één van mijn vorige werkgevers werd hiervoor regelmatig gebruik gemaakt van jqTransform.

jqTransform vervangt het formulierelement door redelijk nette HTML die goed te stijlen is met css. jqTransform vervangt standaard alle formulier-elementen, echter hadden we zelf jqTransform een beetje aangepast zodat inputs en textarea’s met rust gelaten worden. Deze zijn namelijk prima gewoon met css te stijlen.

Helaas had jqTransform toch ook een paar nadelen, waarbij het grootste nadeel misschien toch wel was dat de code sinds augustus 2009 al niet meer wordt onderhouden. Ook heeft de library geen destroy of refresh functionaliteit. Waardoor elementen na initialisatie bijvoorbeeld niet meer via ajax bijgewerkt konden worden.

Ik heb op internet gezocht naar andere jQuery plugins (of javascript libraries) voor het stijlen van formulierelementen, echter de plugins die ik tegen kwam werkten minder goed dan jqTransform en nog belangrijker, waren allemaal minstens 2 tot 3 jaar niet meer bijgewerkt. Dit terwijl sinds jQuery 1.7 er grote performance verbeteringen zijn toegepast in jQuery waar deze libraries dus ook geen gebruik van maken.

Mighty Form Styler for jQuery

Mede hierom ben ik vorig jaar begonnen aan mijn eigen jQuery plugin voor het stijlen van formulierelementen. Deze plugin heb ik heel mooi ‘Mighty Form Styler for jQuery’ gedoopt. Afgekort mfs.

Op dit moment verwerkt de plugin alleen nog maar het select-element, maar misschien in de toekomst ook radiobuttons en checkboxen ook omdat deze lastig zijn om goed te stijlen met css.De plugin is gratis beschikbaar via de MIT License en werkt vrij eenvoudig.

Initialiseren

$(document).ready(function(){
  $('form.mfs').mfs(); // activeert de plugin voor het opgegeven formulier
});

Verversen

$(document).ready(function(){
  $('form.mfs').mfs('refresh'); // ververst de plugin (na een update van je formulier, bijvoorbeeld via ajax)
}

Verwijderen

$(document).ready(function(){
  $('form.mfs').mfs('destroy'); // Verwijderd de toegevoegde functionaliteit
}

Ook is het mogelijk om bij het initialiseren extra opties mee te geven. Documentatie en downloads zijn te vinden op de Github pagina van Mighty Form Styler for jQuery.