Lightbox类
来源:互联网 发布:caffe faster rcnn 编辑:程序博客网 时间:2024/05/16 12:47
Lightbox类
<html>
<head>
<style type="text/css">...
/**//* lightbox CSS */
#lightbox {...}{/**//*该层为高亮显示层*/
display: none;
width:352px;
height:150px;
position:absolute;
font-size:14px;
font-family:"Tahoma",Verdana,Arial,宋体;
z-index:9990;
top: 190px;
left: 33%;
}
.main{...}{ z-index:9999;position:absolute; top:0px; left:0px;}
#lb_inner{...}{ width:350px; height:148px; background:#fff url(images/loading.gif) 15px 30px no-repeat; border:1px solid #ccc;
border-right:1px solid #666; border-bottom:1px solid #666;}
#lb_con{...}{ padding:20px 20px; position:absolute; left:50px;}
.btn{...}{ text-align:center;position:absolute;top:100px;width:100%;}
.shadow{...}{ z-index:9998;position:absolute; top:4px; left:4px; width:352px; height:150px;
background:#666;opacity:0.2;filter:alpha(opacity=20);}
#overlay {...}{/**//*该层为覆盖层*/
display: none;
position: absolute;
top: 0;
z-index: 9000;
background-color: #fff;
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
</style>
<script type="text/javascript">...
var Class = ...{
create: function() ...{
return function() ...{
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) ...{
for (var property in source) ...{
destination[property] = source[property];
}
return destination;
}
//简化document.getElementById(element).style
function $C(element)...{
return document.getElementById(element).style;
}
var Lightbox = Class.create();
Lightbox.prototype = ...{
initialize: function(options) ...{
//可以考虑在这里创建Lightbox的div结构,未知方法
this.SetBox(options);
},
//设置默认属性
SetOptions: function(options) ...{
this.options = ...{//默认值
overlay: true,//覆盖层
bgImage: 'images/ending.gif',//背景图
content: '请点击"取消操作"返回',//内容
btn_value: '取消操作',//按钮内容
btn_onclick: this.Close//按钮操作
}
Object.extend(this.options, options || ...{});
},
//设置Lightbox
SetBox: function(options) ...{
this.SetOptions(options);
$C("lb_inner").backgroundImage = 'url('+this.options.bgImage+')'
document.getElementById("lb_con").innerHTML = this.options.content;
var btn = document.getElementById("lb_btn");
btn.value = " "+this.options.btn_value+" ";
btn.onclick = this.options.btn_onclick;
},
//显示Lightbox
Show: function(options) ...{
this.SetBox(options);
if(this.options.overlay)...{ this.ShowOverlay(); } else ...{ this.CloseOverlay(); };
$C("lightbox").display="block";
SetSelects('hidden');
},
//关闭(隐藏)Lightbox
Close: function() ...{
$C("overlay").display="none";
$C("lightbox").display="none";
SetSelects('visible');
},
//显示设置覆盖层
ShowOverlay: function() ...{
with ($C("overlay")) ...{
display="block";
width = 776+'px';//这里应根据实际情况确定
height = document.body.scrollHeight+'px';
}
},
//关闭覆盖层
CloseOverlay: function() ...{
$C("overlay").display="none";
}
};
//设置所有select的css属性,由于select不能覆盖,所以在显示Lightbox时要隐藏掉
function SetSelects(css) ...{
selects = document.getElementsByTagName("select");
var len = selects.length;
for (i = 0; i != len; i++)
selects[i].style.visibility = css;
}
</script>
</head>
<body>
<div id="overlay"></div>
<div id="lightbox">
<div class="main">
<div id="lb_inner">
<div id="lb_con"> </div>
<div class="btn">
<input id="lb_btn" type="button"/>
</div>
</div>
</div>
<div class="shadow"></div>
</div>
<script type="text/javascript">...
//先创建和初始化一个Lightbox实例
var box = new Lightbox();
//然后就可以对这个Lightbox进行操作了
box.Show(...{
bgImage: 'images/loading.gif',
content: '内容显示',
btn_value: '按钮'
});
</script>
</body>
</html>
<head>
<style type="text/css">...
/**//* lightbox CSS */
#lightbox {...}{/**//*该层为高亮显示层*/
display: none;
width:352px;
height:150px;
position:absolute;
font-size:14px;
font-family:"Tahoma",Verdana,Arial,宋体;
z-index:9990;
top: 190px;
left: 33%;
}
.main{...}{ z-index:9999;position:absolute; top:0px; left:0px;}
#lb_inner{...}{ width:350px; height:148px; background:#fff url(images/loading.gif) 15px 30px no-repeat; border:1px solid #ccc;
border-right:1px solid #666; border-bottom:1px solid #666;}
#lb_con{...}{ padding:20px 20px; position:absolute; left:50px;}
.btn{...}{ text-align:center;position:absolute;top:100px;width:100%;}
.shadow{...}{ z-index:9998;position:absolute; top:4px; left:4px; width:352px; height:150px;
background:#666;opacity:0.2;filter:alpha(opacity=20);}
#overlay {...}{/**//*该层为覆盖层*/
display: none;
position: absolute;
top: 0;
z-index: 9000;
background-color: #fff;
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
</style>
<script type="text/javascript">...
var Class = ...{
create: function() ...{
return function() ...{
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) ...{
for (var property in source) ...{
destination[property] = source[property];
}
return destination;
}
//简化document.getElementById(element).style
function $C(element)...{
return document.getElementById(element).style;
}
var Lightbox = Class.create();
Lightbox.prototype = ...{
initialize: function(options) ...{
//可以考虑在这里创建Lightbox的div结构,未知方法
this.SetBox(options);
},
//设置默认属性
SetOptions: function(options) ...{
this.options = ...{//默认值
overlay: true,//覆盖层
bgImage: 'images/ending.gif',//背景图
content: '请点击"取消操作"返回',//内容
btn_value: '取消操作',//按钮内容
btn_onclick: this.Close//按钮操作
}
Object.extend(this.options, options || ...{});
},
//设置Lightbox
SetBox: function(options) ...{
this.SetOptions(options);
$C("lb_inner").backgroundImage = 'url('+this.options.bgImage+')'
document.getElementById("lb_con").innerHTML = this.options.content;
var btn = document.getElementById("lb_btn");
btn.value = " "+this.options.btn_value+" ";
btn.onclick = this.options.btn_onclick;
},
//显示Lightbox
Show: function(options) ...{
this.SetBox(options);
if(this.options.overlay)...{ this.ShowOverlay(); } else ...{ this.CloseOverlay(); };
$C("lightbox").display="block";
SetSelects('hidden');
},
//关闭(隐藏)Lightbox
Close: function() ...{
$C("overlay").display="none";
$C("lightbox").display="none";
SetSelects('visible');
},
//显示设置覆盖层
ShowOverlay: function() ...{
with ($C("overlay")) ...{
display="block";
width = 776+'px';//这里应根据实际情况确定
height = document.body.scrollHeight+'px';
}
},
//关闭覆盖层
CloseOverlay: function() ...{
$C("overlay").display="none";
}
};
//设置所有select的css属性,由于select不能覆盖,所以在显示Lightbox时要隐藏掉
function SetSelects(css) ...{
selects = document.getElementsByTagName("select");
var len = selects.length;
for (i = 0; i != len; i++)
selects[i].style.visibility = css;
}
</script>
</head>
<body>
<div id="overlay"></div>
<div id="lightbox">
<div class="main">
<div id="lb_inner">
<div id="lb_con"> </div>
<div class="btn">
<input id="lb_btn" type="button"/>
</div>
</div>
</div>
<div class="shadow"></div>
</div>
<script type="text/javascript">...
//先创建和初始化一个Lightbox实例
var box = new Lightbox();
//然后就可以对这个Lightbox进行操作了
box.Show(...{
bgImage: 'images/loading.gif',
content: '内容显示',
btn_value: '按钮'
});
</script>
</body>
</html>
- Lightbox类
- Lightbox类
- lightbox
- lightbox!
- Lightbox
- LightBox
- LightBox
- lightbox分析
- lightbox 开发
- 妙用 Lightbox
- 模拟LightBox
- Lightbox JS
- LightBox 对话框
- LightBox图片显示特效
- Lightbox JS V2.0
- 收藏的LightBox
- lightbox图片播放器
- 各种 lightbox 实现
- ereport输出问题
- oracle 9i 服务的分类
- 倒数计时类
- ajax和XMLHTTP原理
- ASP.NET编程中的十大技巧
- Lightbox类
- 美女
- 数组与Collection之间的转换
- Ajax应用(prototype.js为框架)
- 转】.net 3.0开发环境安装
- 在Eclipse中集成Ant编程之配置篇
- 用Javap反编译帮你理解Java特性
- Tornado2.2forpcPentium的安装和使用流程
- 十句话让你感悟人生