jquery弹窗插件jquery-impromptu.4.0.js

1、入门篇

首先看看怎么安装该插件。跟其他jquery插件一样，首先肯定是要先引入jquery。

然后引入插件的js。

因为这个插件的弹窗，是自带样式的，所以还要引入样式。

/*-------------impromptu---------- */

.jqifade{ position: absolute; background-color: #aaaaaa; }

div.jqi{ width: 400px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; position: absolute; background-color: #ffffff; font-size: 11px; text-align: left; border: solid 1px #eeeeee; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 7px; }

div.jqi .jqicontainer{ font-weight: bold; }

div.jqi .jqiclose{ position: absolute; top: 4px; right: -2px; width: 18px; cursor: default; color: #bbbbbb; font-weight: bold; }

div.jqi .jqimessage{ padding: 10px; line-height: 20px; color: #444444; }

div.jqi .jqibuttons{ text-align: right; padding: 5px 0 5px 0; border: solid 1px #eeeeee; background-color: #f4f4f4; }

div.jqi button{ padding: 3px 10px; margin: 0 10px; background-color: #2F6073; border: solid 1px #f4f4f4; color: #ffffff; font-weight: bold; font-size: 12px; }

div.jqi button:hover{ background-color: #728A8C; }

div.jqi button.jqidefaultbutton{ background-color: #BF5E26; }

.jqiwarning .jqi .jqibuttons{ background-color: #BF5E26; }

/*-------------------------------- */

</style>

最后就是调用，很简单：

$.prompt('hello');

效果：

2、基本篇

插件的调用方法，可以传递2个参数:

$.prompt('hello ',{ ...} });

第一个就是弹窗里面要显示的内容，第二个就是弹窗的一些属性或者说是配置，是一个json，或者说是一个js对象吧，其实一般jquery插件都有默认的设置，如果不需要可以空着不穿。

先看看代码：

var txt = 'Please enter your name:<br />

<input type="text" id="alertName"

name="alertName" value="name here" />';

function callbackfunc(e,v,m,f){

if(v != undefined)

alert(v +' ' + f.alertName);

}

$(function(){

$.prompt(txt,{

buttons: {Hello:"Hello",Hi:"Hi"},

opacity: 0.1,

focus: 0,

show:'slideDown',

callback: callbackfunc

});

来看看调用的参数吧。

首先是hello，这是弹窗里面显示的内容。

然后就是配置。

buttons: {Hello:"Hello",Hi:"Hi"}，就是按钮，两个按钮，一个显示OK，一个显示CANCL，双引号里面的就是按钮的值，一般传给回调函数。

opacity: 0.1，这个是后面遮掩层的透明度，0.1是浅色的，0.9是深色的。

focus: 0，是默认焦点在那个按钮上面，从0开始。

show:'slideDown'，就是弹出窗的弹出形式，这里是下拉窗的形式。

callback: callbackfunc，这个就是回调函数。

回调函数定义为：

function callbackfunc(e,v,m,f){

if(v != undefined)

alert(v +' ' + f.alertName);

}

其中v就是按下的按钮，m是弹出内容的jquery对象，f是所提交的表单。

进阶篇

a、按确定之后检查弹窗内容，确定是否关闭弹出，并且操作弹窗内容

将基本篇的回调函数改成

function callbackfunc(e,v,m,f){

an = m.children('#alertName');

if(f.alertName == ""){

an.css("border","solid #ff0000 1px");

return false;

}

return true;

}

按下按钮之后，如果f.alertName == ""（就是表单中的alertName为空），则an.css("border","solid #ff0000 1px")（操作m--弹窗内容中的表单，把其变成红色），最后return false，取消表单关闭。

b、让弹窗显示中文

$.prompt('Hello World!!',{

buttons:[

{title: '确定',value:true},

{title: '取消',value:false}

submit: function(e,v,m,f){ alert(v); }

});

按之前的写法，button只能显示英文，改成这样就能显示中文了。

c、弹窗states，弹窗状态切换

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){

else if(v=-1)

if(v==0) $.prompt.close()

$.prompt.goToState('state0');

return false;

}

};

$.prompt(statesdemo);

这里跟前面的例子有点不一样，传入了1个js对象，state0是第一个显示的state，然后可以跳到第二个state。

效果：

点击Next会进入下一个state，这里关键代码是$.prompt.goToState('state0')，跳到指定的state。但是，记得在后面return false取消弹窗的消失。

d、第一次访问时的功能导航：

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.',