基于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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 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数组编码转换示例详解
2014/03/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
cookie的secure属性详解
2015/04/08 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Python shutil模块用法实例分析
2019/10/02 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python面向对象实现方法总结
2020/08/12 Python
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
const和static readonly区别
2013/05/20 面试题
大学生实习证明范本
2014/01/15 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
四风查摆剖析材料
2014/10/10 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
试了下Golang实现try catch的方法
2021/07/01 Golang