基于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 入门实例1
Jun 25 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
详解基于webpack&gettext的前端多语言方案
Jan 29 Javascript
JS实现动态星空背景效果
Nov 01 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
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
理工学院学生自我鉴定
2014/02/23 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
租房协议书样本
2014/08/20 职场文书
金融保险专业求职信
2014/09/03 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
小学安全工作总结2015
2015/05/18 职场文书
Nginx 常用配置
2022/05/15 Servers