jQuery Impromptu

About

jQuery Impromptu is an extension 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.

Try my new app to keep you informed of your car's financing status and value.

Donation

Has Impromptu been helpful to you?

Download

• Development
• Github
• Moopromptu

Version

Version 4.0.1

Last updated on 03/03/2012

jQuery Impromptu is currently available for use in all personal or commercial projects under both MIT and GPL licenses. This means that you can choose the license that best suits your project, and use it accordingly.

GPL License

MIT License

JQuery Impromptu is minified using Gedit Clientside Plugin.

Docs

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(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,
		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 (just as with earlier versions of Impromptu).

options

loaded

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

submit

See state submit event above.

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){}

callback

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

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'

classes

Add class names to the outer Impromptu shell (parent of the fade and prompt) Default: ''

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 <select>. 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: "promptDropIn"

persistent

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

timeout

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

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.

Events using Bind

promptloaded

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

promptsubmit

Same as loaded option above. Scope is the current state.

promptclose

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

promptstatechanging

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

promptstatechanged

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

Example of binding an event.

var myPrompt = jQuery.prompt(/*...*/);
myPrompt.bind('promptloaded', function(e){});

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

Returns a jquery object of the current visible state.

jQuery.prompt.getCurrentStateName()

Returns a string current visible state's name.

jQuery.prompt.getStateContent(stateName)

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

jQuery.prompt.goToState(stateName, callback)

Transitions to the specified state. 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.

Demonstrations

• Demo 1
• Demo 2
• Demo States
• Demo States - Survey
• Demo Ajax - JSON
• Demo States - Loan Calculator
• Demo Select Dropdown Search Filter

Example CSS

Below is an example of the css format that could be used with Impromptu. You dont need to use any positioning and transparency attributes as Impromptu takes care of those for you.

Each element within your css should resemble the prefix option you supply to the function call. If a prefix isn't supplied jqi is used. The CSS for all examples can be found in examples.css

.jqifade{
	position: absolute;
	background-color: #aaaaaa;
}
div.jqi{
	width: 400px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	position: absolute;
	background-color: #ffffff;
	font-size: 11px;
	text-align: left;
	border: solid 1px #eeeeee;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 7px;
}
div.jqi .jqicontainer{
	font-weight: bold;
}
div.jqi .jqiclose{
	position: absolute;
	top: 4px; right: -2px;
	width: 18px;
	cursor: default;
	color: #bbbbbb;
	font-weight: bold;
}
div.jqi .jqimessage{
	padding: 10px;
	line-height: 20px;
	color: #444444;
}
div.jqi .jqibuttons{
	text-align: right;
	padding: 5px 0 5px 0;
	border: solid 1px #eeeeee;
	background-color: #f4f4f4;
}
div.jqi button{
	padding: 3px 10px;
	margin: 0 10px;
	background-color: #2F6073;
	border: solid 1px #f4f4f4;
	color: #ffffff;
	font-weight: bold;
	font-size: 12px;
}
div.jqi button:hover{
	background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
	background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{
	background-color: #BF5E26;
}

.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;}

.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; }
.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }

.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; }
.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; }

.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; }
.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; }
.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; }

.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; }
.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; }
.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; }

Moopromptu - A few Differences

The Mootools version of Impromptu enjoys all the same features with only a couple exceptions. First "Moopromptu" uses $prompt to closer adhear to Mootools standards. Secondly to open a prompt you must call show(msg, options) instead of the base $.prompt(msg, options);

$prompt.show(msg, options);

If you want to make your own instance of Moopromptu instead of using $prompt, you can do so like this:

var myPrompt = new Impromptu();
                myPrompt.show('hello world');