​

下载：

​​https://github.com/trentrichardson/jQuery-Impromptu​​


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:

$.fn.extend({  dropIn: function(speed, callback){   var $t = $(this);    if($t.css("display") == "none"){    eltop = $t.css('top');    elouterHeight = $t.outerHeight(true);     $t.css({ top: -elouterHeight, display: 'block' })     .animate({ top: eltop },speed,'swing', callback);   }  } });   $.prompt('Example 7',{ show:'dropIn' });

Example 7

To add a callback function:

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

Example 8

The callback function has three parameters.


  • The first is the value of the button clicked.
  • The second is a jQuery object of the message within the active state when the user clicked the button.
  • The third is an object of key/value pairs of the form values. The keys are the name attribute for the form element.

If a form were in the prompt you could access its elements within this second parameter. The values of the form fields are gathered for you within the third parameter.

var txt = 'Please enter your name:<br />  <input type="text" id="alertName"   name="alertName" value="name here" />';   function mycallbackform(e,v,m,f){  if(v != undefined)   alert(v +' ' + f.alertName); }  $.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(e,v,m,f){  an = m.children('#alertName');   if(f.alertName == ""){   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',{prefix:'impromptu'}).children('#impromptu').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', }).children('#colsJqi').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

A nice clean blue theme.

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

Example 14

A nice clean blue theme with an Ext feel.

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

Example 15

A smooth theme based on the default theme.

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

Example 16

A simple States example. For a more detailed example please see this​​States Demo​​

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

Example 17

Pass key/value pairs as buttons for more complex button titles.

$.prompt('Hello World!!',{  buttons:[   {title: 'Hello World',value:true},   {title: 'Good Bye',value:false}   ],   submit: function(e,v,m,f){ alert(v); }  });

Example 18

To create a tour you first start with states, then give each state some positioning instructions. We'll create a quick method as well to help navigate.

The positioning instructions are provided through an option WITHIN each state. position: { container: '#header', x: 10, y: 45, width: 200, arrow: 'tl' }

The container is the anchor element selector, and x/y are the distances relative to the anchor element. The arrow options are: tl, tc, tr, rt, tm, tb, br, bc, bl, lb, lm, lt.

var tourSubmitFunc = function(e,v,m,f){    if(v === -1){     $.prompt.prevState();     return false;    }    else if(v === 1){     $.prompt.nextState();     return false;    } }, tourStates = [  {   html: 'Welcome to jQuery Impromptu, lets take a quick tour of the plugin.',   buttons: { Next: 1 },   focus: 1,   position: { container: '#header', x: 10, y: 45, width: 200, arrow: 'tl' },   submit: tourSubmitFunc  },  {   html: 'When you get ready to use Impromptu, you can get it here.',   buttons: { Prev: -1, Next: 1 },   focus: 1,   position: { container: '#downloadHeader', x: 170, y: -10, width: 300, arrow: 'lt' },   submit: tourSubmitFunc  },  {   html: "You will also need this CSS",   buttons: { Prev: -1, Next: 1 },   focus: 1,   position: { container: '#cssHeader', x: 40, y: -100, width: 250, arrow: 'bl' },   submit: tourSubmitFunc  },  {   html: 'A description of the options are under the Docs section.',   buttons: { Prev: -1, Next: 1 },   focus: 1,   position: { container: '#docsHeader', x: 115, y: -85, width: 200, arrow: 'lb' },   submit: tourSubmitFunc  },  {   html: 'You will find plenty of examples to get you going.. including this tour..',   buttons: { Prev: -1, Next: 1 },   focus: 1,   position: { container: '#examplesHeader', x: -300, y: -45, width: 250, arrow: 'rm' },   submit: tourSubmitFunc  },  {   html: 'Yep, see, creating a tour is easy.. Here is the source:',   buttons: { Prev: -1, Next: 1 },   focus: 1,   position: { container: '#tourExample', x: -340, y: 5, width: 300, arrow: 'rt' },   submit: tourSubmitFunc  },  {   html: 'This concludes our tour. If you found Impromptu helpful, please see the links to the left, if not, thanks for stopping by!',   buttons: { Done: 2 },   focus: 1,   position: { container: '#donationHeader', x: 420, y: 0, width: 300, arrow: 'lm' },   submit: tourSubmitFunc  } ]; $.prompt(tourStates, { opacity: 0.3 });

Example 19