标签为 "wBox" 的文章

有不少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
    }
}

继续阅读全文……

最近很多使用我的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操作》

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

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

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

wBox截图

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

wBox新功能及其变化

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

继续阅读全文……

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

wBox粗糙的主页

今天看了一下cssrain的评论，都提出来了再IE6下wBox背景显示不全，不能完全覆盖页面的问题，在wBox开发中，IE6下的背景最初我是通过CSS hack来解决的，代码如下：

* html #wBox_overlay { /* ie6 hack */
  position: absolute;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

但是这就造成了一个bug：当IE6下，页面高度不够的时候，就会出现背景不能完全覆盖整个页面的bug。
下午的时候，我及时的修改了这个bug，通过计算页面高宽以及window的高宽，取其最大值作为背景层的高宽，这样就解决了wBox在IE6 下背景显示不全的bug啦~
最新的wBox下载地址：http://code.google.com/p/follow5api/downloads/list

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

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

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

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

最简单的使用方法

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

html代码如下：

<a href="#nosee" class='wBox'>这是一个隐藏wBox</a>
<div id="nosee" style="display:none">这里是个隐藏的id为nosee的DIV</div>
<a href='http://js8.in/wbox/001.jpg' class='wBox'>这是一个image wBox</a>

js代码如下：

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

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

继续阅读全文……