基于jQuery的消息提示插件之旅 DivAlert(三)


Posted in Javascript onApril 01, 2010

本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些。


2.0版本

//设置插件基本信息 
var options = o || {}; 
options.width = o.width || 300; 
//提示框宽度若小于104px则自动重置为200px 
if (options.height > 104) { 
options.height = o.height; 
} else { 
options.height = 200; 
} 
options.title = o.title || "提示标题"; 
options.content = o.content || "提示内容"; 
//与css文件结合,方便在外部自定义样式而不用改写js文件 
options.bgClass = o.bgClass || 'jBg'; 
options.wrapClass = o.wrapClass || 'jWrap'; 
options.titClass = o.titClass || 'jTit'; 
options.conClass = o.conClass || 'jCon'; 
options.clsClass = o.clsClass || 'jBtn'; 
options.botDivClass = o.botDivClass || 'jBot'; 
options.botBtnClass = o.botBtnClass || 'jBotBtn';

3.0版本
//设置插件基本信息 
var settings = { 
width: 300, 
height: 200, 
title: "提示标题", 
content: "提示内容", 
bgClass: 'jBg', 
wrapClass: 'jWrap', 
titClass: 'jTit', 
conClass: 'jCon', 
clsClass: 'jBtn', 
botDivClass: 'jBot', 
botBtnClass: 'jBotBtn' 
}; 
$.extend(settings, options);

都是些很基础的东西,不过还是打个包吧,有兴趣的可以下来瞧瞧。。。
完整代码打包下载

作者:Rocky翔(cnblogs)
感谢作者的代码,三水点靠木编辑简单的说明下,从刚开始的第一版的不完善到完善,都是一步一步过来的,开始没有什么是完美的,经过参考别人的代码,学习别人的长处,慢慢的就会让你的程序更完善,建议大家在以后学习的过程中,多参考多写,不要只看不动手,多多动手自己写代码,才能真正的学习到知识,发现自己的不足。
下面附上作者前两期发布的文章
基于jQuery的弹出消息插件 DivAlert之旅(一)

基于jQuery的消息提示插件 DivAlert之旅(二)

基于jQuery的消息提示插件 DivAlert之旅(三) 推荐

Javascript 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
详解js闭包
Sep 02 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 #Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 #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
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
javascript加号"+"的二义性说明
2013/03/04 Javascript
js倒计时小程序
2013/11/05 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
js星星评分效果
2014/07/24 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
Python显示进度条的方法
2014/09/20 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python框架django基础指南
2016/09/08 Python
JSON Web Tokens的实现原理
2017/04/02 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python内存管理机制原理详解
2019/08/12 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
迟到检讨书5000字
2014/01/31 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
国情备忘录观后感
2015/06/04 职场文书
亮剑观后感500字
2015/06/05 职场文书
Python四款GUI图形界面库介绍
2022/06/05 Python