jClever - smart jNice with buns. Styling HTML Forms

The author of the article and the plugin is DenisZ habraiser



jClever Forms is a plugin for styling HTML forms that provides its own API.



Experience with such stylists forms, as jNice , jqTransform , Uniform forced to write a bicycle. The current version almost completely repeats jNice capabilities and even complements them.

')



Plugin features:

• styling of select form elements (drop-down list) including scroll bar
• stylization of form elements like checkbox (flags)
• stylization of form elements such as radio button (switches)
• form reset (reset method)
• disable plugin (destroy method)
• working with the collection of form elements (selectCollection)
• direct drop-down list management (selectSetPosition method)
• direct checkbox control (checkboxSetState method)
• direct control radio button (radioSetState method)

The current implementation of the plug-in deliberately does not include the processing of text fields (input type text) and multi-line text fields (textarea). Their processing and stylization, as a rule, does not cause difficulties. Perhaps in future versions of the plugin, this approach will be revised.



The simplest initialization, you just need to add a class, for example, jClever to the form:



<form action="#" method="get" class="jClever">



and initialize the plugin on the selector:



jQuery('.jClever').jClever();



Plugin page: http://tools.alterego-russia.ru/jclever



The demo can be seen here: http://tools.alterego-russia.ru/jclever/example/index.html



Project on githab: https://github.com/denis-zavgorodny/jClever



Documentation: http://tools.alterego-russia.ru/jclever/#docs



UPD:

• when moving through form elements added active element selection
• Fixed behavior of selects (opening, closing), moving through selectors from the keyboard [up / down], processing Enter, Tab and Space. Automatic scrolling after moving around (thanks to merkuriy for comments)