jQuery Impromptu

• jQuery
• Download
• Blog

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;
       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

• Demo 1
• Demo 2

Donation

Has Impromptu been helpful to you?

Version

Version 1.4

Last updated on 3/6/2008

Apache License, Version 2

Examples

To simply call Impromptu like you would a regular alert command:

$.prompt('Example 1');

Example 1

To add a a couple extra buttons with different values:

$.prompt('Example 2',{ buttons: { Ok: true, Cancel: false } });

Example 2

To change the opacity of the fading overlay:

$.prompt('Example 3',{ opacity: 0.2 });

Example 3

To change the default focused button:

$.prompt('Example 4',{ buttons: { Ok: true, Cancel: false }, focus: 1 });

Example 4

To change the css name use prefix:

$.prompt('Example 5',{ prefix: 'impromptu' });

Example 5

To change the prompt show effect:

$.prompt('Example 6',{ show:'slideDown' });

Example 6

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

Example 7

To add a callback function:

function mycallbackfunc(v,m){
      $.prompt('i clicked ' + v);
}
$.prompt('Example 8',{ callback: mycallbackfunc });

Example 8

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


Example 9

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


Example 10

Impromptu plays very nicely with other jQuery extensions like the jQuery Corner Plugin

$.prompt('Example 11').corner();

Example 11

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();

Example 12

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

Example 13

http://www.cssrain.cn/demo/jQuery-Impromptu/index.html