当前位置: 编程技术>WEB前端
本页文章导读:
▪jquery 调用父窗口的方法，并且传参，元素也为父窗口的元素 今天写出一个比较经典的js,jquery 调用父窗口的方法，并且传参，元素也为父窗口的元素
如下：
window.parent.SurveyLeftInfo.enableLink($("#do_drop a", window.parent.document));
说明：
1、SurveyLeftIn.........
▪[原]发布一个jQuery弹出层插件，开源附主站，jquery.purebox.js jquery.purebox.js怎么能够活下来插件写好了，代码公开了，不是就代表就完成了，真的有人使用和反馈，才能体现出来它的意义和价值，才有可能存活下来。仅仅完成代码，只是其中的一小部分.........
▪js 弹出层 最近貌似经常用到弹出层，把代码给整理一下方便以后用。原生js写的demo，弹出效果比较生硬。先看一下demo（点击这里） 先。接下来是代码：var Popup=(function(){ var close_trigger, //关闭弹.........
[1]jquery 调用父窗口的方法，并且传参，元素也为父窗口的元素
来源: 互联网 发布时间: 2013-11-06
今天写出一个比较经典的js,jquery 调用父窗口的方法，并且传参，元素也为父窗口的元素
如下：
window.parent.SurveyLeftInfo.enableLink($("#do_drop a", window.parent.document));
说明：
1、SurveyLeftInfo：父窗口的js对象
2、($("#do_drop a", window.parent.document) 父窗口的界面元素
作者：wangwangwang666888 发表于2013-3-20 11:01:59 原文链接
阅读：51 评论：0 查看评论
[2][原]发布一个jQuery弹出层插件，开源附主站，jquery.purebox.js
jquery.purebox.js
怎么能够活下来
- 插件写好了，代码公开了，不是就代表就完成了，真的有人使用和反馈，才能体现出来它的意义和价值，才有可能存活下来。
- 仅仅完成代码，只是其中的一小部分工作，也不是花费时间最多的地方，更多的时间用在，写用例和完善说明文档，还要为它做一个公开的网站（网站页面的布局，内容的分类整理，几乎相当于建立了一个小的个人网站），这样有了一个公开的获取最新代码的地址，再加上反馈会更好，信息的交流也是必不可少。
- 我选择了github，它为以上的一切思路和功能的实现提供了环境。
- 能不能活下来不知道，反正我做了我该做的。
夸它两句
- 简单、精致、够用，是我最初的想法。
- 结构简单，样式简洁，没有使用图片，更换皮肤很轻松，代码结构也清晰易懂。
- 兼容性考虑了人见人恨的IE6。
- 支持多级弹出
- 支持拖拽
- 支持动态调整尺寸
- 支持静止定位
- 支持高度与宽度自适应内容
小样
用或不用，能用或不能用，看一眼：
地址
准备了好长时间，看过以后回来说两句。
一切尽在 tianshaojie.github.com/purebox
本文链接
[3]js 弹出层
最近貌似经常用到弹出层，把代码给整理一下方便以后用。原生js写的demo，弹出效果比较生硬。先看一下demo（点击这里） 先。
接下来是代码：
var Popup=(function(){
var close_trigger, //关闭弹出层触发器
popup_layer, //弹出层
popup_layer_box; //弹出层里的box
//设置弹出层的高、宽度
function initLayer(){
//先初始化先，不然resize有问题
popup_layer.style.width=0+"px";
popup_layer.style.height=0+"px";
var winWidth,
winHeight;
if (window.innerWidth){
winWidth = window.innerWidth;
}else if ((document.body) && (document.body.clientWidth)){
winWidth = document.body.clientWidth;
}
//获取窗口高度
if (window.innerHeight){
winHeight = window.innerHeight;
}else if ((document.body) && (document.body.clientHeight)){
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
popup_layer.style.width=winWidth+"px";
popup_layer.style.height=winHeight+"px";
var scrollTop=(document.documentElement.scrollTop>document.body.scrollTop)?document.documentElement.scrollTop:document.body.scrollTop;
popup_layer.style.top=scrollTop+"px";
}
//设置弹出层里面box的位置
function initLayerBox(){
var layerHeight=parseInt(popup_layer.style.height),
boxHeight=popup_layer_box.offsetHeight,
layerWidth=parseInt(popup_layer.style.width),
boxWidth=popup_layer_box.offsetWidth,
top=(layerHeight-boxHeight)/2,
left=(layerWidth-boxWidth)/2;
popup_layer_box.style.top=top+"px";
popup_layer_box.style.left=left+"px";
}
function closeLayerHandler(event){
var e=event?event:window.event,
target=e.target||e.srcElement;
if(target.id===close_trigger.id||target.id===popup_layer.id){
popup_layer.style.display='none';
toggleBody('auto','');
}
}
function popupResizeHandler(){
initLayer();
initLayerBox();
}
function toggleBody(bo,ho){
document.body.style.overflow=bo;
document.getElementsByTagName('html')[0].style.overflow=ho; //ie6下直接设置body的overflow时有问题,所以加多这一句
}
return{
init:function(close_trigger_id,popup_layer_id,popup_layer_box_id){
close_trigger=document.getElementById(close_trigger_id);
popup_layer=document.getElementById(popup_layer_id);
popup_layer_box=document.getElementById(popup_layer_box_id);
window.onresize=popupResizeHandler;
close_trigger.onclick=closeLayerHandler;
popup_layer.onclick=closeLayerHandler;
},
popup:function(){
toggleBody('hidden','visible');
popup_layer.style.display="block";
initLayer();
initLayerBox();
}
}
}());
var trigger=document.getElementById('btnPopup');
Popup.init('closePopupLayer','popupLayer','popupLayerBox');
trigger.onclick=Popup.popup;
var close_trigger, //关闭弹出层触发器
popup_layer, //弹出层
popup_layer_box; //弹出层里的box
//设置弹出层的高、宽度
function initLayer(){
//先初始化先，不然resize有问题
popup_layer.style.width=0+"px";
popup_layer.style.height=0+"px";
var winWidth,
winHeight;
if (window.innerWidth){
winWidth = window.innerWidth;
}else if ((document.body) && (document.body.clientWidth)){
winWidth = document.body.clientWidth;
}
//获取窗口高度
if (window.innerHeight){
winHeight = window.innerHeight;
}else if ((document.body) && (document.body.clientHeight)){
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
popup_layer.style.width=winWidth+"px";
popup_layer.style.height=winHeight+"px";
var scrollTop=(document.documentElement.scrollTop>document.body.scrollTop)?document.documentElement.scrollTop:document.body.scrollTop;
popup_layer.style.top=scrollTop+"px";
}
//设置弹出层里面box的位置
function initLayerBox(){
var layerHeight=parseInt(popup_layer.style.height),
boxHeight=popup_layer_box.offsetHeight,
layerWidth=parseInt(popup_layer.style.width),
boxWidth=popup_layer_box.offsetWidth,
top=(layerHeight-boxHeight)/2,
left=(layerWidth-boxWidth)/2;
popup_layer_box.style.top=top+"px";
popup_layer_box.style.left=left+"px";
}
function closeLayerHandler(event){
var e=event?event:window.event,
target=e.target||e.srcElement;
if(target.id===close_trigger.id||target.id===popup_layer.id){
popup_layer.style.display='none';
toggleBody('auto','');
}
}
function popupResizeHandler(){
initLayer();
initLayerBox();
}
function toggleBody(bo,ho){
document.body.style.overflow=bo;
document.getElementsByTagName('html')[0].style.overflow=ho; //ie6下直接设置body的overflow时有问题,所以加多这一句
}
return{
init:function(close_trigger_id,popup_layer_id,popup_layer_box_id){
close_trigger=document.getElementById(close_trigger_id);
popup_layer=document.getElementById(popup_layer_id);
popup_layer_box=document.getElementById(popup_layer_box_id);
window.onresize=popupResizeHandler;
close_trigger.onclick=closeLayerHandler;
popup_layer.onclick=closeLayerHandler;
},
popup:function(){
toggleBody('hidden','visible');
popup_layer.style.display="block";
initLayer();
initLayerBox();
}
}
}());
var trigger=document.getElementById('btnPopup');
Popup.init('closePopupLayer','popupLayer','popupLayerBox');
trigger.onclick=Popup.popup;
效果：在chrome、ff下是正常的能达到预期效果。。。但是呢，IE~有个问题一直无法理解，就是鼠标不知道为什么可以跑到弹出层的下面的去。比如在有遮罩的情况下，遮罩层下面的按钮是点击不了的，但是在IE，鼠标硬是能穿过遮罩层去点击底下的按钮。到底是为什么呢，有啥补救的好办法？( ˇˍˇ )就因为这个bug，本来想说点击半透明遮罩层的时候就关闭弹出层，现在在IE下这个效果实现不了了。
本文链接
最新技术文章: