手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于jQuery的消息提示插件之旅 DivAlert(三)
基于jQuery的消息提示插件之旅 DivAlert(三)
摘要:本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些。2.0版本复制代码代码如下:/...

本版本遵循了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之旅(三) 推荐

【基于jQuery的消息提示插件之旅 DivAlert(三)】相关文章:

Javascript递归打印Document层次关系实例分析

基于jquery实现下拉框美化特效

jQuery插件制作之全局函数用法实例

jQuery的基本概念与高级编程

jQuery封装的tab选项卡插件分享

js实现仿Windows风格选项卡和按钮效果

js+html5实现canvas绘制圆形图案的方法

基于Web标准的UI组件 — 树状菜单(2)

jQuery插件datepicker 日期连续选择

jQuery插件支持同一页面被多次调用

精品推荐
分类导航