jQuery Impromptu
About
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.
Docs
There are many options with Impromptu:
$.prompt( msg , options )
msg
The message to be displayed in the prompt. This may be text or html.
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
- 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: "show"
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.
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
.jqiwarning .jqi{
background-color: #b0be96;
}
.jqifade{
background-color: #ffffff;
}
div.jqi{
position: absolute;
background-color: #c0cEa6;
padding: 10px;
width: 300px;
}
div.jqi .jqiclose{
float: right;
margin: -35px -10px 0 0;
cursor: pointer;
}
div.jqi .jqicontainer{
background-color: #e0eEc6;
padding: 5px;
color: #ffffff;
font-weight: bold;
}
div.jqi .jqimessage{
background-color: #c0cEa6;
padding: 10px;
}
div.jqi .jqibuttons{
text-align: center;
padding: 5px 0 0 0;
}
div.jqi button{
padding: 3px 10px 3px 10px;
margin: 0 10px;
}
Setting Defualts
Setting defaults globally is optional with version 1.0. To set any or all of the options mentioned above you may use the following syntax:
$.SetImpromptuDefaults({
prefix: 'myPrompt',
show: 'slideDown'
});
Demonstrations
Donation
Has Impromptu been helpful to you?
Version
Version 1.4
Last updated on 3/6/2008
Examples
To simply call Impromptu like you would a regular alert command:
$.prompt('Example 1');
To add a a couple extra buttons with different values:
$.prompt('Example 2',{ buttons: { Ok: true, Cancel: false } });
To change the opacity of the fading overlay:
$.prompt('Example 3',{ opacity: 0.2 });
To change the default focused button:
$.prompt('Example 4',{ buttons: { Ok: true, Cancel: false }, focus: 1 });
To change the css name use prefix:
$.prompt('Example 5',{ prefix: 'impromptu' });
To change the prompt show effect:
$.prompt('Example 6',{ show:'slideDown' });
To use your own jQuery effect:
jQuery.fn.extend({
myanimation: function(speed){
var t = $(this);
if(t.css("display") == "none")
t.show(speed,function(){
t.hide(speed,function(){
t.show(speed); }); });
else
t.hide(speed,function(){
t.show(speed,function(){
t.hide(speed); }); });
}
});
$.prompt('Example 7',{ show:'myanimation' });
To add a callback function:
function mycallbackfunc(v,m){
$.prompt('i clicked ' + v);
}
$.prompt('Example 8',{ callback: mycallbackfunc });
The callback function has two parameters. The first is the value of the button clicked. The second is a jQuery object of the message when the user clicked the button. If a form were in the prompt you could access its elements within this second parameter.
var txt = 'Please enter your name:<br />
<input type="text" id="alertName"
name="myname" value="name here" />';
function mycallbackform(v,m){
$.prompt(v +' ' + m.children('#alertName').val());
}
$.prompt(txt,{
callback: mycallbackform,
buttons: { Hey: 'Hello', Bye: 'Good Bye' }
});
The submit function can prevent the box from closing and the callback function from being called by returning false. This is great for validating input before closing the prompt. You must always return true or false with this function.
var txt = 'Try submitting an empty field:<br />
<input type="text" id="alertName"
name="myname" value="" />';
function mysubmitfunc(v,m){
an = m.children('#alertName');
if(an.val() == ""){
an.css("border","solid #ff0000 1px");
return false;
}
return true;
}
$.prompt(txt,{
submit: mysubmitfunc,
buttons: { Ok:true }
});
Impromptu plays very nicely with other jQuery extensions like the jQuery Corner Plugin
$.prompt('Example 11').corner();
Give it a complete make over! Some buttons, a different prefix, a new entrance effect and some rounded corners! The css is in the CSS file for this page and the slideDown effect comes in the jQuery library.
$.prompt('Example 12<p>Save these settings?</p>',{
buttons:{ Apply:1,Maybe:2,Never:3 },
prefix:'colsJqi',
show:'slideDown'
}).corner();
A nice light brown theme.
var brown_theme_text = '<h3>Example 13</h3>'+
'<p>Save these settings?</p>'+
'<img src="images/help.gif" alt="help" '+
'class="helpImg" />';
$.prompt(brown_theme_text,{
buttons:{Ok:true,Cancel:false},
prefix:'brownJqi'
});
