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 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 <select>. Default: false
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"
top
Distance from the top of the screen to place the prompt. Default: "10px"
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.

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 Defaults

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'
});

Version

Version 2.0

Last updated on 2/11/2009

Apache License, Version 2

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').children('#jqi').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'
}).children('#colsJqi').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'
});

A nice clean blue theme.

$.prompt('Hello World!!',{
      buttons:{Ok:true,Cancel:false},
      prefix:'cleanblue'
});

A nice clean blue theme.

$.prompt('Hello World!!',{
      buttons:{Ok:true,Cancel:false},
      prefix:'extblue'
});

A simple States example.

var statesdemo = {
      state0: {
            html:'test 1.<br />test 1..<br />test 1...',
            buttons: { Cancel: false, Next: true },
            focus: 1,
            submit:function(v,m){
                  if(!v) return true;
                  else
                        $.ImpromptuGoToState('state1');
                  return false;
            }
      },
      state1: {
            html:'test 2',
            buttons: { Back: -1, Exit: 0 },
            focus: 1,
            submit:function(v,m){
                  if(v==0) jQuery.ImpromptuClose()
                  else if(v=-1)
                        $.ImpromptuGoToState('state0');
                  return false;
            }
      }
};

$.prompt(statesdemo);