基于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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
JavaScript中return false的用法
Mar 12 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
jsTree使用记录实例
Dec 01 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
详解JavaScript中的链式调用
Nov 27 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 版本]
2007/03/20 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
用javascript控制iframe滚动的代码
2007/04/10 Javascript
js jquery做的图片连续滚动代码
2008/01/06 Javascript
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
python list中append()与extend()用法分享
2013/03/24 Python
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
小学数学教学反思
2014/02/02 职场文书
竞选班委演讲稿
2014/04/28 职场文书
质量主管工作职责
2014/09/26 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
python通过新建环境安装tfx的问题
2022/05/20 Python
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS