jQuery Impromptu(jQuery Dialog插件)（1）--prompt user input in a fashionable way

官方网站：http://trentrichardson.com/Impromptu/index.php

jQuery Impromptu不仅仅只是取代了“alert,prompt,confirm”，它还允许在控件里创建表单，哈！这是一个提示用户输入的很时髦方式。

基本用法：

$.prompt( msg , options )

msg:提示信息的内容可以是一个字符串，或者是一个“states”对象，如果是“states”对象则有以下的属性：

var statesdemo = { 
      state0: {
            html:'test 1.<br />test 1..<br />test 1',//String，HTML OR TEXT
            buttons: { Cancel: false, Next: true },//按钮的key/value散列表，默认值是{Ok:true}
            focus: 1,//哪个按钮载入时取得焦点，默认值为：0
            submit:function(v,m,f){ 
            //当这个提示框被提交时调用的函数，默认为：function(){ return true; } 
            //v-点击的按钮的值，在这里是(true/false),m-返回消息框的jQ匹配集，形如$("div")，f-提交的表单
                  if(!v) return true;
                  else
                        $.ImpromptuGoToState('state1');//state转换函数
                  return false; 
            }
      },
      state1: {
            html:'test 2',
            buttons: { Back: -1, Exit: 0 },
            focus: 1,
            submit:function(v,m,f){ 
                  if(v==0) jQuery.ImpromptuClose()
                  else if(v=-1)
                        $.ImpromptuGoToState('state0');
                  return false; 
            }
      }
};

$.prompt(statesdemo); 

 如果msg仅仅是一串字符串则有以下参数：

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 //设置css的z-index属性是999，让它在最上一层，避免被覆盖

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 //改变速度$.prompt('Example 6',{promptspeed:'fast',show:'slideDown'});

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"

persistent

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

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

增加一个额外的按钮：
$.prompt('Example 2',{ buttons: { Ok: true, Cancel: false } });

 

改变引用css的前缀:
$.prompt('Example 5',{ prefix: 'impromptu' });

使用回调函数：

function mycallbackfunc(v,m,f){
      $.prompt('i clicked ' + v);
}
$.prompt('Example 8',{ callback: mycallbackfunc });
使用submit function,通过返回false阻止提示框关闭：

var txt = 'Try submitting an empty field:<br />
      <input type="text" id="alertName" 
      name="myname" value="" />';

function mysubmitfunc(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 }
});

和jQuery Corner Plugin搭配使用使提示框产生圆角：
$.prompt('Example 11',{prefix:'impromptu'}).children('#impromptu').corner();

设置默认值：
$.SetImpromptuDefaults({
      prefix: 'myPrompt',
      show: 'slideDown'
});