基于jQuery的弹出消息插件 DivAlert之旅(一)


Posted in Javascript onApril 01, 2010

想着自己学习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之旅(三) 推荐

Javascript 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
详解vuex的简单使用
Mar 12 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
javascript中数组的常用算法深入分析
Mar 12 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
基于jquery的tab切换 js原理
Apr 01 #Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 #Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 #Javascript
JQuery autocomplete 使用手册
Apr 01 #Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 #Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 #Javascript
js prototype截取字符串函数
Apr 01 #Javascript
You might like
业余方法DIY电子管FM收音机
2021/03/02 无线电
用Flash图形化数据(一)
2006/10/09 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
python config文件的读写操作示例
2019/09/27 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python字典实现伪切片功能
2020/10/28 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
2016年法制宣传月活动总结
2016/04/01 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB