三水清wBox

iframe自适用高度代码

三水清 — Sat, 15 Jan 2011 02:02:48 +0000

有不少wBox的用户反映iframe时候不可以自动撑开高度，今天在无意中看到了司徒正美的一片关于iframe自适用高度的js代码，感觉不错，转载来了。

var adjustIframe = function (id) {
    var iframe = document.getElementById(id)
    var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
    var callback = function () {
        var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
        iframe.style.height = iheight + "px";
    }
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", callback);
    } else {
        iframe.onload = callback
    }
}

HTML代码如下所示：

使用代码：

window.onload = function(){
     adjustIframe("js_sub_web");
}

推荐几篇关于Iframe的文章：

声明：文章未声明为原创文章，本文链接 http://js8.in/664.html. 转载请注明转自 JS8.IN ™

随机文章

关于wBox iFrame回调关闭问题的解决方案

三水清 — Tue, 07 Sep 2010 05:05:39 +0000

最近很多使用我的jQuery弹出框插件wBox的人问我，关于wBox的关闭问题，例如一个页面中使用wBox iframe进来一个页面，而这个页面是进行用户登录，登录成功就关闭wBox，其实实现回调关闭wBox的方法很简单，就是使用iframe的DOM操作即可，例如我们的代码这样写：

//wbox赋值出来，然后使用wbox对象的close的方法关闭
var wbox=$("#iframe").wBox({
   	requestType: "iframe",
	target:"b.html"
   });

那么我们在页面b.html中进行了用户登录验证，我们验证成功，要关闭wBox，就可以在b.html中使用parent.wbox.close()来进行关闭，就像下面的代码，只要我们验证完毕运行closewBox就可以关闭了iframe：

function closewBox(){
    parent.wbox.close()
}

关于iframe子页面与父页面之间的DOM操作可以参考下面的文章：《使用JavaScript在IE和Firefox下进行iframe的DOM操作》

声明：文章未声明为原创文章，本文链接 http://js8.in/620.html. 转载请注明转自 JS8.IN ™

随机文章

jQuery弹出框wBox的一个使用实例

三水清 — Mon, 09 Aug 2010 08:06:07 +0000

公司网站越来越多的使用了wBox，比如最新的产品普加邻居，封装了wBox(jQuery的一款弹出框插件)，房产展示页面的房贷计算器采用的就是wBox，搜索结果页面采用的也是wBox，但是相对于其他页面，搜索结果页面每一个li下面会有三个不同的wBox样式，我不可能每个都是手写一段wBox代码吧~

鼠标划上去显示wBox的三个触发链接

经过一番的研究，觉得可以通过下面的代码就解决这个问题：

$.each($('a[rel*=wBox]'),function(key,value){
var $t = $(this),name = this.title, url = this.href,  type = $t.attr("type"), geo = $t.attr("geo")
var str = "";
switch (type) {
    case "map"://地图
        $(this).wBox({requestType:"iframe",target:url,title:name,iframeWH:{width:570,height:370}});
        break;
    case "video"://视频
        $(this).wBox({requestType:"iframe",target:url,title:name,iframeWH:{width:497,height:378}});
        break;
    case "bus"://公交驾车
        str = '';
        var briefTit = name.substring(0, 12) + (name.length > 12 ? "..." : "");
        str += '到这里来
出发地：
目的地：' + briefTit + '
\'#FHinput\').val(),\'青岛\',\'b\',\'' + geo + '\',\'' + name + '\',\'FHinput\');return false;"/>\'#FHinput\').val(),\'青岛\',\'d\',\'' + geo + '\',\'' + name + '\',\'FHinput\');return false;"/>
';
        str += '从这里出发
出发地：' + briefTit + '
目的地：
\'#THinput\').val(),\'青岛\',\'b\',\'' + geo + '\',\'' + name + '\',\'THinput\');return false;"/>\'#THinput\').val(),\'青岛\',\'d\',\'' + geo + '\',\'' + name + '\',\'THinput\');return false;"/>
';
        $(this).wBox({html:str,title:name});
        break;
}       
});

看看效果吧~

公交驾车wBox的弹出框

地图部分的wBox弹出框

P.S.：其实换一种思考的方法，多想想应该会有更好的解决方法

声明：文章未声明为原创文章，本文链接 http://js8.in/585.html. 转载请注明转自 JS8.IN ™

随机文章

jQuery弹出框插件wBox 1.0正式发布

三水清 — Tue, 25 May 2010 03:19:11 +0000

jQuery插件wBox 1.0正式发布——经过一系列的wBox需求分析，进行了wBox的代码重构，去除了一些鸡肋的功能~根据公司项目的需要进行了功能的调整，并且在界面上进行了美化处理~

wBox截图

查看wBox代码实例 wBox1.0下载

wBox新功能及其变化

优化代码~
美化界面~
默认可拖动，drag为false关闭
新增wBox关闭方法：wBox.close()
新增wBox打开方法：wBox.showBox()
新增wBox定时关闭设置：通过参数timeout设置定时关闭时间
新增在不触发click事件的前提，显示wBox，$(s).wBox({show:true})
去除灯箱功能（准备做一个单独的jQuery灯箱插件）
去除设置窗口位置

wBox功能特点

背景透明度可以根据实际情况进行调节
可以根据需要添加wBox标题
支持callback函数
支持html内容自定义
支持在wBox显示#ID的内容
支持Ajax页面内容
支持iframe
支持wBox拖拽功能
ESC键，或者在背景上双击即可关闭wBox
Class为wBox_close点击可以关闭wBox，无论是组装的html，还是隐藏的html，甚至于iframe的内容中的.wBox_close

查看wBox代码实例 wBox1.0下载

声明：文章未声明为原创文章，本文链接 http://js8.in/539.html. 转载请注明转自 JS8.IN ™

随机文章

jQuery插件wBox准备更新

三水清 — Tue, 04 May 2010 00:54:42 +0000

随着断桥残雪写的jQuery插件wBox的用户越来越多，越来越多的人提出了wbox的需求，可是我最近比较忙，没有时间改写wBox，正好公司的一个新项目要采用wBox，提出了很多要求，我准备在接下来的一些时间中更新下wBox，并且解决IE6下的一些布局上的bug、添加一些新的功能，大家敬请期待吧~
嘻嘻~

wBox粗糙的主页

声明：文章未声明为原创文章，本文链接 http://js8.in/531.html. 转载请注明转自 JS8.IN ™

随机文章

jQuery插件–wBox发布

三水清 — Tue, 09 Mar 2010 05:56:44 +0000

经过大约一周的时间，wBox终于跟大家见面啦，这是断桥残雪写的第一个jQuery插件，开发时间比较急促，所以有不足之处希望大家指出。

wBox——轻量级的弹出窗口jQuery插件，基于jQuery1.4开发，主要实现弹出框的效果，并且加入了很多有趣的功能，比如可img灯箱效果，callback函数，显示隐藏层，Ajax页面，iframe嵌入页面……

背景透明度可以根据实际情况进行调节，甚至不设置背景
可以根据需要添加wBox标题
支持设置窗口位置，默认为在中心显示
支持callback函数
支持html内容自定义
img灯箱看图功能
支持在wBox显示#ID的内容
支持Ajax页面内容
支持设置背景，不设置背景
支持wBox拖拽功能
ESC键，或者在背景上双击即可关闭wBox
.wBoxClose的内容click可以关闭wBox，无论是组装的html，还是隐藏的html，甚至于iframe的内容中的.wBoxClose

下面简单介绍下wBox的使用方法：

最简单的使用方法

首先下载wBox文件，然后将wBox中的
引入wbox.js文件
引入wbox.css文件
注意：wBox源代码文件夹中的图片要跟js，css放在相同的目录下,loading.gif要跟你页面放在同一个目录

html代码如下：

这是一个隐藏wBox
这里是个隐藏的id为nosee的DIV
这是一个image wBox

js代码如下：

$(".wBox").wBox();

这样就建立了一个最简单的wBox.

这是一个隐藏wBox 这是一个image wBox

设置名字的wBox

$("#wbox1").wBox({
title: "Test Title Name",
html: "点击弹出设置名字的wBox"
});

背景为透明的wBox

$("#wbox2").wBox({opacity:0,html:'点击弹出背景为透明的wBox'});

弹出无背景wBox

$("#wbox3").wBox({overlay:false,html:'点击弹出无背景wBox'});

href为图片的进行wBox

$('.wbox').wBox();

隐藏id为#info的层

代码：

$('.wbox').wBox();

可拖拽的#wBoxUL层

$('#drag').wBox({drag:true,title:'wBox功能简介部分的层'});

img灯箱连看

$("#imgA").wBox({images:['001.jpg','002.jpg','003.jpg','004.jpg','005.jpg'],isImage:true});

iframe页面嵌入百度

$("#isFrame").wBox({isFrame:true,iframeWH:{width:800,height:400}});

本地iframe 自使用高度

$("#isFrame2").wBox({isFrame:true});

设置位置为left300 top 100

$('#setPos').wBox({setPos:true,left:300,top:100,html:'设置位置为left300 top 100'});

Ajax加载内容

$("#ajax").wBox();

没有标题的弹出框

$("#noTitle").wBox({noTitle:true});

利用callback添加地图的wBox

var maplet=null;
oo=false;
var callback=function(){
maplet = new Maplet('myMap');
maplet.centerAndZoom(new MPoint('HEUIDVZVVHUEEU'),8);
maplet.addControl(new MStandardControl({view: {pan:false,ruler: false}})); 
}
$("#map").wBox({
title:'普加地图--可拖拽',
html:"
",
callBack:callback,drag:true});

加载地图-利用callback函数

查看演示

声明：文章未声明为原创文章，本文链接 http://js8.in/502.html. 转载请注明转自 JS8.IN ™

随机文章

猜你喜欢：
关于wBox iFrame回调关闭问题的解决方案	使用JavaScript在IE和Firefox下进行iframe的DOM操作	再谈Iframe的问题	用document.domain+iframe实现Ajax跨子域
无觅

猜你喜欢：
jQuery插件--wBox发布	jQuery插件wBox准备更新	jQuery弹出框wBox的一个使用实例	最新版wBox 解决IE6 背景太小bug
无觅

猜你喜欢：
解决IE6不支持max-height的bug	IE6中a标签location.href失效解决方法	jQuery插件--wBox发布	jQuery弹出框插件wBox 1.0正式发布
无觅

三水清wBox

iframe自适用高度代码

随机文章

关于wBox iFrame回调关闭问题的解决方案

随机文章

jQuery弹出框wBox的一个使用实例

随机文章

jQuery弹出框插件wBox 1.0正式发布

wBox新功能及其变化

wBox功能特点

随机文章

jQuery插件wBox准备更新

随机文章

最新版wBox 解决IE6 背景太小bug

随机文章

jQuery插件–wBox发布

最简单的使用方法

设置名字的wBox

背景为透明的wBox

弹出无背景wBox

href为图片的进行wBox

隐藏id为#info的层

可拖拽的#wBoxUL层

img灯箱连看

iframe页面嵌入百度

本地iframe 自使用高度

设置位置为left300 top 100

Ajax加载内容

没有标题的弹出框

利用callback添加地图的wBox

随机文章