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
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.
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>
$('#form').promin(options);
options.actions = /* submit: 'default' // Submit form normally submit: 'ajax' // Submit form via AJAX submit: false // Do nothing (use event handler) */ submit: 'default' ;
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() ;
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 */
options.ajaxCallback = function(data) // data: Contents of requested page ;
$('#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
