基于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 相关文章推荐
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
Node.js事件驱动
Jun 18 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
微信小程序一周时间表功能实现
Oct 17 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
图书管理程序(三)
2006/10/09 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
庆七一活动总结
2014/08/27 职场文书
党员查摆剖析材料
2014/10/10 职场文书
借款民事起诉状范文
2015/05/19 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL