jQuery Impromptu

• Include jQuery and Impromptu into your page
• Add the CSS file or copy it to your CSS
• call using $.prompt('hello world!');

Options

$.prompt( msg , options )

msg

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

name: A valid variable name to access the state by. Default: State's array index or object key

title: A string to be used as the title of the state

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 or selector to element to focus. Default: 0

defaultButton: Index of the button to focus. Similar to the focus option, but if focus is a selector this can still style the button as the default. Default: 0

submit:  A function to be called when the prompt is submitted. Default: function(event, value, message, formVals){} Return false or event.preventDefault() to keep the prompt open. Event object also has properties event.state and event.stateName.

var temp = {
	state0: {
		html:'test 1...',
		buttons: { Cancel: false, Next: true },
		focus: 1,
		position: { container: '#elId', x: -300, y: -45, width: 250, arrow: 'rm' },
		submit:function(e,v,m,f){ }
	},
	state1: {
		html:'test 2..',
		buttons: { Back: -1, Exit: 0, Next: 1 },
		focus: 2,
		submit:function(e,v,m,f){ }
	}
};

If a string is passed as the message in place of a state, buttons, focus, and submit will be substituted from the options below.

options

buttons: An object containing the text and values of each button the user may click.Default: { Ok : true }

classes: An object of class names for each part of a prompt for greater compatibilty with existing css frameworks. For example if you would like to use twitter bootstrap you would include the base theme (in the themes folder), then pass the following classes:

{
	box: '',
	fade: '',
	prompt: '',
	close: '',
	title: 'lead',
	message: '',
	buttons: '',
	button: 'btn',
	defaultButton: 'btn-primary'
}

Use the base theme in place of the default css file since it has minimal styling, allowing other css frameworks to work their magic. To view a complete demo see the examples section below.

close: A function to be called when the prompt is closed and just before being removed from the DOM. Default: function(event[, value, message, formVals]){} Last three paremeters available only when button was clicked.

focus: Index of the button to focus or selector to element to focus. Default: 0

loaded: A function to be called when the prompt is fully loaded Default: function(event){}

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"

persistent: If the prompt should close when the fade is clicked (true doesn't close).Default: true

prefix: A prefix to be used for all css classes and html object id's. Use this option when you want to change themes. Default: 'jqi'

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"

statechanging: A function to be called when a state is about to change. Default: function(event, fromStatename, toStateName){} Return false or event.preventDefault() to prevent the state change.

statechanged: A function to be called when a state has changed. Default: function(event, toStateName){}

submit: See state submit event above.

timeout: The number of milliseconds until the prompt automatically closes. Default: 0

top: Distance from the top of the screen the prompt will be Default: 15%

useiframe: Will use an iframe for the overlay in IE6 to cover up <select>. Default: false

zIndex: zIndex to apply to the prompt. Default: 999

Methods

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.getCurrentState()

Returns a jquery object of the current visible state.

jQuery.prompt.getCurrentStateName()

Returns a string current visible state's name.

jQuery.prompt.getState(stateName)

Returns a jquery object of the state, so you can update the content within it.

jQuery.prompt.addState(stateName, stateOptions, insertAfterState)

Injects a new state after the indicated insertAfterState name. Returns a jQuery object of the new state.

jQuery.prompt.removeState(stateName)

Removes the state. Returns true on success, false on failure.

jQuery.prompt.goToState(stateName, subState, callback)

Transitions to the specified state. subState is a Boolean to use substate functionality. Callback represents a statechanged event.

jQuery.prompt.nextState(callback)

Transitions to the next state. Callback represents a statechanged event.

jQuery.prompt.prevState(callback)

Transitions to the previous state. Callback represents a statechanged event.

jQuery.prompt.close()

Closes the prompt.

Events

If you like to bind events manually you can do so with the following:

impromptu:loaded

Same as loaded option. Scope is the entire prompt and fade container.

var myPrompt = jQuery.prompt(/*...*/);
myPrompt.on('impromptu:loaded', function(e){});

impromptu:submit

Same as submit option. Scope is the state element. These events are per state, so you must attach it directly to a state.

var myPrompt = jQuery.prompt(/*...*/);
$.prompt.getStateContent('state2')
	.on('impromptu:submit', function(e,v,m,f){});

impromptu:close

Same as close option. Scope is entire prompt and fade container

impromptu:statechanging

Same as statechangin option. Scope is the entire prompt and fade container. This fires before the state changes, so you may return false or use e.preventDefault() prevent the state change.

impromptu:statechanged

Same as statechanged option. Scope is the entire prompt and fade container. This fires after the state has successfully changed.