New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/promin-jquery-plugin-to-boost-your-html-forms-looks/
Promin : jQuery plugin to boost your HTML forms Looks
Download Demo
A jQuery plugin to boost your HTML forms to level awesome!
By presenting the form in chunks, it will consume less space, look better and improves a user’s experience.
Usage
HTML
Your HTML needs little change in order for Promin to work. That means your form will still work if Promin does not for whatever reason.
All you have to do is add the pm-step class to each step, like so:
<form> <div class="pm-step"> <input name="name" /> </div> <div class="pm-step"> <input name="email" /> </div> <div class="pm-step"> <textarea name="message"></textarea> </div> </form>
JavaScript
$('#form').promin(options);
Options
Actions
options.actions = /* submit: 'default' // Submit form normally submit: 'ajax' // Submit form via AJAX submit: false // Do nothing (use event handler) */ submit: 'default' ;
Events
options.events = /* Returning false on any of these events will cancel the operation. i: the current field index fields: list of all fields */ // Called after the field index has changed change: function(i) , // Called after .promin('next') is called next: function(i) , // Called after .promin('previous') is called previous: function(i) , // Called when the form is being submit submit: function(fields) , // Called after .promin('reset') is called reset: function() ;
Shortcuts
options.shortcuts = /* Each shortcut (next, previous or reset) consists of an array of shortcuts. One shortcut can need multiple keys, defined as an array. next: [ 9, // tab 13, // return/enter [13, 17] // enter + ctrl ] Note that are different keys are set in $.promin.key as listed below */ next: [ $.promin.key.tab, $.promin.key.enter ], // tab or enter previous: [[ $.promin.key.tab, $.promin.key.shift ]], // tab and shift reset: [ $.promin.key.escape ] // escape ; /* $.promin.key = backspace: 8, tab: 9, enter: 13, // alias for return return: 13, shift: 16, ctrl: 17, alt: 18, caps: 20, escape: 27, space: 32, pageup: 33, pagedown: 34, end: 35, home: 36, left: 37, up: 38, right: 39, down: 40, del: 46 */
AJAX callback
options.ajaxCallback = function(data) // data: Contents of requested page ;
Methods
$('#form').promin('next'); // Move form one step behind $('#form').promin('previous'); // Move form one step ahead $('#form').promin('show', i); // Show specific field <i> $('#form').promin('reset'); // Reset and rewind the form $('#form').promin('submit'); // Submit form manually