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


Posted in Javascript onApril 01, 2010

改进的代码部分主要如下:
1、创建default.css文件:
代码

img 
{ 
vertical-align:middle; 
} 
.jBg 
{ 
position: absolute; 
top: 0; 
left: 0; 
z-index: 9999; 
background-color: #999; 
filter: alpha(opacity=70); 
opacity: 0.7; 
} 
.jWrap 
{ 
position: absolute; 
border: 1px solid #cef; 
z-index: 10000; 
overflow: hidden; 
} 
.jTit 
{ 
text-align: left; 
background:#F1F1F1; 
padding: 8px; 
cursor: move; 
height: 20px; 
vertical-align: middle; 
border-bottom:1px solid #DEDEDE; 
text-indent:5px; 
font-size:15px; 
line-height:20px; 
} 
.jCon 
{ 
background-color: #fff; 
padding: 10px 13px; 
overflow: auto; 
font-size:15px; 
} 
.jBtn, jBtn:hover 
{ 
cursor:pointer; 
height:17px; 
width:17px; 
} 
.jBtn 
{ 
background:transparent url(close.png) no-repeat; 
position:absolute; 
right:8px; 
top:7px; 
} 
.jBtn:hover 
{ 
background:transparent url(close.png) no-repeat -19px 0px; 
} 
.jConBottom 
{ 
background:#F1F1F1; 
text-align:right; 
width:100%; 
height:41px; 
position:absolute; 
} 
.jBtnConfirm 
{ 
background:url(btn.png) no-repeat 0 -24px transparent; 
cursor:pointer; 
color:#3F3F3F; 
width:46px; 
height:21px; 
line-height:23px; 
text-align:center; 
font-size:12px; 
float:right; 
margin-top:10px; 
margin-right:10px; 
}

2、修改JS默认options部分(以便与css文件配合):

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、由于俺以前只构建了title和content两个部分的div,为了实现效果还要添加两个div,一个是底部大的div,还有一个是确定按钮

//创建底部包含确定按钮的div 
var $conBottomDiv = createElement("div") 
.addClass('jConBottom') 
.css('top', options.height - $titDiv.outerHeight() -40 + 'px'); //创建底部确定按钮 
var $conBottomBtn = createElement("div") 
.addClass('jBtnConfirm') 
.html('确定') 
.click(close);

最后别忘了在Dom创建时将这两块附加在需要的位置就ok了。。。

效果图:
基于jQuery的消息提示插件 DivAlert之旅(二)
装饰了一下,确实比以前要好看了啊^_^
代码打包下载

基于jQuery的弹出消息插件 DivAlert之旅(一)

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

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

Javascript 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
Element Dialog对话框的使用示例
Jul 26 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
js 实现打印网页中定义的部分内容的代码
Apr 01 #Javascript
You might like
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
Python中自定义函数的教程
2015/04/27 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
Python线程threading模块用法详解
2020/02/26 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
python 爬取小说并下载的示例
2020/12/07 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
节能环保家庭事迹材料
2014/08/27 职场文书
邀请函怎么写
2015/01/30 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
求职信如何撰写?
2019/05/22 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
Python加密与解密模块hashlib与hmac
2022/06/05 Python