首先非常感谢网友小宇的无私分享,此Jquery插件是一个由漫画原创弹出层插件改篇而成的Dialog弹出层作品,修正和完善了部分功能,从而让插件在页面的使用更加方便、灵活,也鼓励网友们可以对JquerySchool网站上现有的插件做二次开发和完善(前提条件必须要得到原创作者的同意),这样网友们不但可以学习写插件,也可以把最完善的作品分享给大家,这样才可以让网友们做到真正的互相学习,共同进步。
参数介绍和使用代码如下:
/*内置的默认参数如下,仅作展示,demo中不使用defaults这个变量*/
var defaults ={
title: "谢谢使用Dialog-jQuery插件Edit By [小宇<i@windyland.com>]",/*弹出窗标题*/
name: "D" + new Date().getTime(),/*这个不用管,是为了防止命名冲突*/
type: "text",/*内容的类型,有 text:直接内容,url:ajax方式获取内容,selector:jq元素选择字符串,内容为其html()
iframe:不用说了,iframe加载 */
content: "本插件改编自[漫画弹出层插件]欢迎访问:http://www.windyland.com",/*对应类型的content,这个是默认的,实际调用不在参数里配置,配置了也没用*/
width: 600,/*宽度*/
height: 400,/*高度*/
time: 0 /*自动关闭时间,0为不关闭*/
}
/*使用方法****
$.Dialog(内容,参数); //调用方法
$.Dialog({更改的默认参数});//第一个参数给定object的话,可以配置默认参数(当前页面有效),不需每次调用给定参数了
*/
$(document).ready(function(){
$("#tmp1").click(function(){
$.Dialog();
});
$("#tmp2").click(function(){
$.Dialog("你好,欢迎您光临本站!");
});
$("#tmp3").click(function(){
$.Dialog("你好,欢迎您光临本站!",{time:2000});
});
$("#tmp4").click(function(){
$.Dialog("http://www.baidu.com",{type:"iframe"});
});
$("#tmp5").click(function(){
var def = {
title:"这里是修改的默认标题",
}
$.Dialog(def);
$.Dialog("本次函数未给定title参数,但是默认title已修改,再点击下上面的link,看看title");
});
});
2013-06-03更新内容如下:
1、插件函数增加了返回值,返回值为一个对象:
{ dialog: the.dialog, //jquery dom 弹出层对象
blank: the.blank,//jquery dom 半透明背景遮罩
content: the.content// jquery dom 显示内容的的div层对象
}
方便了函数后的dom和内容操作
2、增加了代码强制关闭关闭功能,应对延时等待时,需要强制关闭的需求,方法为:$.Dialog({close:true});
3、修复了几个bug,主要为配置默认参数时被覆盖的问题、content参数某些情况传递失败问题,url取值方式时内容错误的问题等。。。
4、优化代码,提高执行效率,减少冗余和资源占用
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
网友小宇 层特效 弹出层 提示插件 实用特效 tip提示层 图片遮罩效果