基于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中void(0)的具体含义解释
Feb 27 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 Javascript
vue动态绑定style样式
Apr 20 Vue.js
基于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采集相关教程之一 CURL函数库
2010/02/15 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
python 中xpath爬虫实例详解
2019/08/26 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
四年级数学教学反思
2014/02/02 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
《长相思》听课反思
2014/04/10 职场文书
六年级学生评语
2014/04/22 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
银行催款通知书
2015/04/17 职场文书