Hazel Ryan

jForms 1.0 - Niceforms for jQuery

This is an implementation of niceforms for jQuery. I wrote this plugin for a site that was already jQuery and niceforms, however, with the use of jQuery, the niceforms script is half the size (uncompressed) as it weighs in at a little under 10k.

I've also made a number of improvements to the select box handling to make them behave more like regular select boxes, you can use your arrow keys to navigate up and down the list (without the browser window also moving, you can type with up to a second between key presses to search the box (ie. if you type in 'an' it will select the first item in the list beginning with 'an'), if the box has more than listSize entries it will be truncated and a scroll bar will be show (handy for long lists) and if there isn't enough room below the box to show the list, it will pop upwards instead (just like the real thing). You can also use the enter key to select the currently highlighted item and to open and close the list



The key part is $('form').jForms() - this will apply jforms to all the forms on your page, you can use any jquery selector to target your form (technically it doesn't need to be a form, it should work fine with any parent container). There are also 2 options:

  • listSize specifies how many list elements to show before showing a scroll bar, the default value is 20
  • imagePath specifies the location of the images to use, this only affects images that are controlled by the javascript, see the stylesheet to change other image locations. The defauly value is /niceforms/default/

Options are specified as a hash eg.

$('form').jForms({listSize:20, imagePath:'/niceforms/default/'});


jForms 1.0