基于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 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
js制作简易年历完整实例
Jan 28 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
详解React-Todos入门例子
Nov 08 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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 $_SERVER当前完整url的写法
2009/11/12 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python私有属性和方法实例分析
2015/01/15 Python
Python版微信红包分配算法
2015/05/04 Python
Python第三方库的安装方法总结
2016/06/06 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python 处理文件的几种方式
2019/08/23 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
python switch 实现多分支选择功能
2020/12/21 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
武汉某公司的C#笔试题面试题
2015/12/25 面试题
实习自我鉴定模板
2013/09/28 职场文书
旷课检讨书大全
2014/01/21 职场文书
教师党员承诺书
2014/03/25 职场文书
买卖协议书范本
2014/04/21 职场文书
代领报检证委托书范本
2014/10/11 职场文书
加班费申请报告
2015/05/15 职场文书
百万英镑观后感
2015/06/09 职场文书
Python制作表白爱心合集
2022/01/22 Python