jQuery Impromptu is an extention to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.

How to use:

There are many options with Impromptu:
$.prompt( msg , options )
msg

The message can either be a string, or an object of “states”. Each state has the following properties:

html
A string of html or text for the content
buttons
An object containing the text and values of each button the user may click. Default: { Ok : true }
focus
Index of the button to focus(0,1,2..). Default: 0
submit
A function to be called when the prompt is submitted. Default: function(){ return true; }

var temp = {
      state0: {
            html:'test 1...',
            buttons: { Cancel: false, Next: true },
            focus: 1,
            submit:function(v,m){ }
      },
      state1: {
            html:'test 2..',
            buttons: { Back: -1, Exit: 0, Next: 1 },
            focus: 2,
            submit:function(v,m){ }
      }
};

If a string is passed as the message in place of a state, buttons, focus, and submit will be substituted from the options below (just as with earlier versions of Impromptu).
options

loaded
A function to be called when the prompt is fully loaded Default: function(){}
submit
A function to be called when the prompt is submitted. Default: function(){ return true; }
callback
A function to be called when the prompt is submitted and removed. Default: function(){}
buttons
An object containing the text and values of each button the user may click. Default: { Ok : true }
prefix
A prefix to be used for all css classes and html object id’s. Default: ‘jqi’
focus
Index of the button to focus(0,1,2..). Default: 0
zIndex
zIndex to apply to the prompt. Default: 999
useiframe
Will use an iframe for the overlay in IE6 to cover up . Default: false
top
Distance from the top of the screen the prompt will be Default: 15%
opacity
The prefered opacity of the transparent layer placed over the container. Default: 0.6
overlayspeed
The prefered speed of the fadeIn and fadeOut of the overlay (”slow”, “fast”, number) Default: “slow”
promptspeed
The prefered opacity of the showing of the prompt (”slow”, “fast”, number). Default: “fast”
show
Name of the jQuery method to animate the entrance of the prompt(”show”,”fadeIn”,”slideDown”). Default: “fadeIn”
persistent
If the prompt should close when the fade is clicked (true doesn’t close). Default: true

returns

returns a jQuery object of the prompt box and fade. Note: This has changed to a container with everything within it, fade and prompt box.
Helper Functions

jQuery.prompt.setDefaults(options)
    Sets the defaults for prompts.
    jQuery.prompt.setDefaults({
          prefix: 'myPrompt',
          show: 'slideDown'
    });
jQuery.prompt.setStateDefaults(options)
    Sets the defaults for states.
    jQuery.prompt.setStateDefaults({
          buttons: { Ok:true, Cancel:false },
          focus: 1
    }); 

jQuery.prompt.getStateContent(stateName)
Returns a jquery object of the state, so you can update the content within it.
jQuery.prompt.goToState(stateName)
Transitions to the specified state.
jQuery.prompt.nextState()
Transitions to the next state.
jQuery.prompt.prevState()
Transitions to the previous state.
jQuery.prompt.close()
Closes the prompt.

Demo: http://trentrichardson.com/Impromptu/index.php

Download: Minified Development

Source: http://trentrichardson.com/Impromptu/index.php

Related Listings:

1. jQuery Virtual Keyboard – For Safer Forms For those of us who travel often, we often end...
2. 10+ JQuery tutorials for working with HTML forms Submit A Form Without Page Refresh using jQuery Submitting a...
3. Sexy Combo – jQuery Plugin Sexy Combo is a jQuery plugin that allows you to...
4. Building a better web forms : Context highlighting using jQuery In my previous article “Labels in form layouts” I wrote...
5. Jquery Plugin – Feedback Feedback is a jQuery plugin that lets you send Feedback...

Do you like this post?

Email: