jquery弹窗插件jquery-impromptu.4.0.js
1、入门篇
首先看看怎么安装该插件。跟其他jquery插件一样，首先肯定是要先引入jquery。
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
然后引入插件的js。
<script type="text/javascript" src="js/jquery-impromptu.4.0.js"></script>
因为这个插件的弹窗，是自带样式的，所以还要引入 样式 。
<style type="text/css">
/*-------------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.',
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 });
其实这个是state的变体，给states加上position属性。用$.prompt.prevState()和$.prompt.nextState()来在states间跳转。