基于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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
基于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读取文件内容的方法汇总
2015/01/24 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
深入理解Python对Json的解析
2017/02/14 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python中pyplot基础图标函数整理
2020/11/10 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
北京天润融通.net面试题笔试题
2012/02/20 面试题
竞聘书怎么写,如何写?
2014/03/31 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript