基于jQuery的弹出消息插件 DivAlert之旅(一)
更新时间:2010年04月01日 22:41:41 作者:
这个DivAlert插件,顾名思义就是页面弹出框,也就相当于Winform里面MessageBox.Show()那样的东西。
想着自己学习Javascript,以及Ajax、jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来瞧瞧,了解了jQuery插件的基本格式,理一下基本的思路,动工吧。。。
这个DivAlert插件,顾名思义就是页面弹出框,也就相当于Winform里面MessageBox.Show()那样的东西。
首先,我们来定义一下一些最基本的参数:
插件初始化
(function($) {
$.jDivAlert = function(o) {
//设置插件基本信息
var options = o || {};
options.width = o.width || 300;
options.height = o.height || 200;
options.title = o.title || "提示标题";
options.content = o.content || "提示内容";
随后定义一个创建页面元素的方法,这样可以重用,简写js:
function createElement(obj) {
return $(document.createElement(obj));
}
创建背景div及设定样式
var $bgDiv = createElement('div')
.css({ 'position': 'absolute', 'top': '0', 'left': '0', 'z-index': '9999', 'filter': 'alpha(opacity=70)', 'backgroundColor': '#999', 'opacity': '0.7', 'width': document.documentElement.clientWidth + "px", 'height': document.documentElement.clientHeight + "px" })
.appendTo('body');
创建提示div
var $outDiv = createElement('div')
.css({ 'position': 'absolute', 'top': ($(window).height() - options.height) / 2 + $(window).scrollTop() + 'px', 'left': ($(window).width() - options.width) / 2 + $(window).scrollLeft() + 'px', 'border': '1px solid #cef', 'zIndex': '10000', 'width': options.width + 'px', 'height': options.height + 'px', 'overflow': 'hidden' })
.appendTo('body');
创建提示div的标题部分
var $titDiv = createElement("div")
.css({ 'textAlign': 'left', 'backgroundColor': '#54A1D9', 'padding': '8px', 'cursor': 'move', 'height': '20px', 'vertical-align': 'middle' })
.html(options.title)
.appendTo($outDiv);
创建提示div的内容部分
var $conDiv = createElement("div")
.css({ 'backgroundColor': '#fff', 'textAlign': 'center', 'padding': '12px', 'height': options.height - $titDiv.outerHeight() })
.html(options.content)
.appendTo($outDiv);
创建关闭按钮
var $clsBtn = createElement("img")
.attr('src', 'del.gif')
.css({ 'cursor': 'pointer', 'float': 'right' })
.click(close)
.appendTo($titDiv);
创建弹出框关闭事件:
function close() {
$bgDiv.fadeOut();
$outDiv.fadeOut();
}
}
})(jQuery);
要看到使用效果,在页面script部分加入如下代码即可(当然jQuery库文件不可少啊,现在最新版是1.4.2,可以去官网http://www.jQuery.com下载):
$(document).ready(function() {
$.jDivAlert({
width: 300,
height: 300
});
});
貌似还有很多功能有待完善,哎。。继续努力。。。
打包下载地址
基于jQuery的弹出消息插件 DivAlert之旅(一)
基于jQuery的消息提示插件 DivAlert之旅(二)
基于jQuery的消息提示插件 DivAlert之旅(三) 推荐
这个DivAlert插件,顾名思义就是页面弹出框,也就相当于Winform里面MessageBox.Show()那样的东西。
首先,我们来定义一下一些最基本的参数:
插件初始化
复制代码 代码如下:
(function($) {
$.jDivAlert = function(o) {
//设置插件基本信息
var options = o || {};
options.width = o.width || 300;
options.height = o.height || 200;
options.title = o.title || "提示标题";
options.content = o.content || "提示内容";
随后定义一个创建页面元素的方法,这样可以重用,简写js:
复制代码 代码如下:
function createElement(obj) {
return $(document.createElement(obj));
}
创建背景div及设定样式
复制代码 代码如下:
var $bgDiv = createElement('div')
.css({ 'position': 'absolute', 'top': '0', 'left': '0', 'z-index': '9999', 'filter': 'alpha(opacity=70)', 'backgroundColor': '#999', 'opacity': '0.7', 'width': document.documentElement.clientWidth + "px", 'height': document.documentElement.clientHeight + "px" })
.appendTo('body');
创建提示div
复制代码 代码如下:
var $outDiv = createElement('div')
.css({ 'position': 'absolute', 'top': ($(window).height() - options.height) / 2 + $(window).scrollTop() + 'px', 'left': ($(window).width() - options.width) / 2 + $(window).scrollLeft() + 'px', 'border': '1px solid #cef', 'zIndex': '10000', 'width': options.width + 'px', 'height': options.height + 'px', 'overflow': 'hidden' })
.appendTo('body');
创建提示div的标题部分
复制代码 代码如下:
var $titDiv = createElement("div")
.css({ 'textAlign': 'left', 'backgroundColor': '#54A1D9', 'padding': '8px', 'cursor': 'move', 'height': '20px', 'vertical-align': 'middle' })
.html(options.title)
.appendTo($outDiv);
创建提示div的内容部分
复制代码 代码如下:
var $conDiv = createElement("div")
.css({ 'backgroundColor': '#fff', 'textAlign': 'center', 'padding': '12px', 'height': options.height - $titDiv.outerHeight() })
.html(options.content)
.appendTo($outDiv);
创建关闭按钮
复制代码 代码如下:
var $clsBtn = createElement("img")
.attr('src', 'del.gif')
.css({ 'cursor': 'pointer', 'float': 'right' })
.click(close)
.appendTo($titDiv);
创建弹出框关闭事件:
复制代码 代码如下:
function close() {
$bgDiv.fadeOut();
$outDiv.fadeOut();
}
}
})(jQuery);
要看到使用效果,在页面script部分加入如下代码即可(当然jQuery库文件不可少啊,现在最新版是1.4.2,可以去官网http://www.jQuery.com下载):
复制代码 代码如下:
$(document).ready(function() {
$.jDivAlert({
width: 300,
height: 300
});
});
貌似还有很多功能有待完善,哎。。继续努力。。。
打包下载地址
基于jQuery的弹出消息插件 DivAlert之旅(一)
基于jQuery的消息提示插件 DivAlert之旅(二)
基于jQuery的消息提示插件 DivAlert之旅(三) 推荐
相关文章
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
本文将采用Jquery+Ajax+PHP+MySQL来实现一个客户分类列表的管理,如何利用Ajax和Json技术让用户操作起来觉得更轻松,感兴趣的小伙伴们可以参考一下2015-10-10jQuery中attr()与prop()函数用法实例详解(附用法区别)
这篇文章主要介绍了jQuery中attr()与prop()函数用法,结合实例形式详细分析了attr()与prop()函数的使用技巧与相关注意事项,并附带了attr()与prop()函数用法的区别,需要的朋友可以参考下2015-12-12jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
本文给大家分享的是一款jQuery整屏(全屏)滚动插件网页特效,滚动鼠标滚轮整屏一屏滚动切换代码,可设置文字/图片绝对上下左右居中显示JS代码,时下最流行的jQuery全屏滚动插件!(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)2015-04-04jQuery UI AutoComplete 自动完成使用小记
jQuery UI AutoComplete 自动完成使用小记,使用jquery的朋友实现搜索自动完成等功能的朋友可以参考下。2010-08-08Jquery Easyui分割按钮组件SplitButton使用详解(17)
这篇文章主要为大家详细介绍了Jquery Easyui分割按钮组件SplitButton的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-12-12Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
通过点击按钮来请求WebService.asmx的 GetList()方法,获取泛型集合。2010-03-03
最新评论