学习从实践开始之jQuery插件开发 对话框插件开发

2020-05-17 06:21:16易采站长站整理

3.对话框居中显示 
    对于对话框居中显示,有两种方式实现。
    一是通过CSS实现。
      position:absolute;如果页面有滚动条的时,当滚动条滚动时,对话框也会移动。
      position:fixed;比较理想,无论如何滚动,对话框始终停留在页面居中位置,唯一的缺点就是不支持IE6(网上有关于如果兼容IE6的方法,感兴趣的朋友可以自己去实现)。
    二是通过js脚本控制。
      通过计算页面长宽来定位,当改变页面大小时,对话框位置不会改变,效果不理想。(当然了,可以通过监听页面发生改变时,自动调整位置,但是实现起来比较麻烦,感兴趣的朋友可以自己去尝试)
五.浏览器兼容
  浏览器兼容什么的最讨厌了,不过话说回来最理想的效果当然是能够兼容所有浏览器,事实上如果我们花更多的时间也确实可以做到兼容所有浏览器。但是这样做值得吗?如果问页面设计人员最讨厌的浏览器是什么?我想大多数都会回答是IE6,是的,这个曾经风靡全球,霸占全球超过90%用户电脑的浏览器,我们曾经觉得它很好,好吧,也许我该说不错,又或者还可以;不管怎么样,它曾经确实是全球最受欢迎的浏览器。但是现在,它是我们开发者眼中最不受欢迎的浏览器,在全球平均使用不超过5%的情况下,在天朝却仍然超过20%的用户在使用它(来自http://www.ie6countdown.com/的统计),这是为什么呢?同样一个功能如果要做到兼容IE6这些老版本的浏览器,我们大概要多花三分之一甚至更多的时间,生命是短暂的,同志们,为何不把有限的时间拿去做更有意义的事情呢?杀死IE6从我做起!
六.功能实现和调用

CSS部分

<style type=”text/css”>
/*为了避免命名冲突,我们将该插件所有样式都放在该类之下*/
.ctcx-dialog
{
font-size:14px;
}
.ctcx-dialog .mark /*遮罩层样式*/
{
position:absolute;
left:0;
top:0;
background-color:#000;
z-index:99999;
}
.ctcx-dialog .dialog /*对话框样式*/
{
position:fixed;
left:50%;
top:50%;
background-color:#FFF;
z-index:99999;
border:2px solid #000;
padding:2px;
}
.ctcx-dialog .dialog .bar /*对话框标题栏*/
{
height:30px;
background-color:#999;
color:#FFF;
}
.ctcx-dialog .dialog .bar .icon /*对话框标题栏图标*/
{
width:25px;
height:30px;
background-repeat:no-repeat;
background-position:center;
display:inline-block;
}
.ctcx-dialog .dialog .bar .title /*对话框标题栏标题*/
{
width:340px;
height:30px;
line-height:30px;
overflow:hidden;
display:inline-block;
vertical-align:top;