|
Oct
01
|
|
此插件所有的更新都会跟在此文章后, 特此通知!
Google Code Project Home Page: http://code.google.com/p/jquery-msgbox/
原1.0版本查看：又见div提示框,jQuery版
2.0版本改进：
1. 修改了插件的整个写法，可读性更好，将直接的HTML操作改为jquery对象的操作，出错可能性减小
2. 自动关闭时间初始值由-1改为0, 逻辑更可取
3. 分离了各部分样式（除了显示必须的样式）
4. 关闭时的事件，由原有的eval实现，改为直接函数传递，操作性更强
5. 加入了关闭图标，更美观
6. 背景透明值可设定（0~1）
7. 加入了ajax方式完成后的事件，且参数data可以传递
8. 解决了原版拖拽时鼠标容易脱离的问题，使得拖拽更加连贯
9. 解决了IE中背景层无法盖住select的bug
10. 解决了拖拽时提示框可以拖出界外的bug
11. 将原有的click关闭提示框的方式改为mousedown，防止关闭按钮上的拖拽
12. 解决了手动关闭提示框后，自动关闭数秒仍然运行的bug
13. 加入改变窗口大小重置提示框位置的功能
下载：
3.0 更新： 测试页面
1. 真正加入关闭后事件（上一版本忘了加）
2. 加入字符串调用模式，仅给出字符串参数就可以弹出提示框
3. 加入了定义标题的css，修正了titleClass不能定义标题的bug
4. 加入针对iframe的oneBoxMode，控制在iframe中是否能再弹出提示框
5. 加入单击背景层标题栏闪动的功能（类似alert）
6. 自动计算以定位关闭图标的位置
7. 自动计算iframe的高度
8. 修正页面较窗口短时背景层不能盖住整个页面的bug，并修正背景层过长的bug
9. 修正iframe模式下，拖拽提示框鼠标进入iframe后拖拽不结束的bug
下载：
3.1 更新：
1. 修正IE8以下“无法得到 display 属性。 参数无效”的bug
2. 关闭提示框后移动提示框的HTML代码
下载：
4.0更新: 测试页面
1. 彻底修正ie6中无法得到display属性的问题和找不到关闭图标的问题
2. 增加firefox有效的弹出对话框时隐藏滚动条的功能（IE下无效）
3. 增加alert模式，模拟window.alert的效果
4. 增加confirm模式，模拟window.confirm效果，并可得到返回值
5. 修正oneBoxMode，只针对iframe中再弹出iframe的情况
6. 对代码进行了其他调整
7. 提供jquery.msgbox.min.js的下载，代码更简化，调用效率更高
下载：
jquery.msgbox.4.1 Demo
更新:
1. 关闭图标载入之前是加入“关闭”字样
2. 修正页面过长或过宽时提示框仍在左上的bug（感谢）
下载：
jquery.msgbox.4.2 Demo
更新:
1. 修正IE6下背景层无法盖住select的bug(感谢yygcom)
下载：
jquery.msgbox.5.0 Demo
更新:
1. 更改了一些设置的参数名称: 如closeAfter => autoClose, closeEvent => onClose, 意思更加明确
2. 增加了对input的支持, 并支持自定义input box的class, 采用onInputed函数来返回输入的值
3. 增加了是否允许拖拽的设置参数: enableDrag
4. 增加了提示框打开和关闭时是否允许动画的设置参数
5. 页面滚动时, 使得提示框相对窗口的位置不动
6. 增加了从外部关闭提示框的方法 $.closemsgbox, 具体设置参见demo中的说明
7. 不再强行需要关闭图标,当不设置closeImg时,显示"关闭"字样
8. 去掉了oneboxmode及hidescrollbar等一些鸡肋属性设置, 去掉了处理select的遮盖问题的方法
9. 更改了拖拽函数, 使用jquery.dragndrop插件, 对dragndrop进行了一些修正(请使用我提供的这个插件)
10. 针对text或ajax, 内容框的overflow默认方法不再是hidden, 更改为auto.
下载：
jquery.msgbox.6.0 Demo date ： 2010.5.12
更新:
1. 更改整个插件的编码框架，有利于从外部操作msgbox
2. 增加多种外部操作方法（例如从外部关闭msgbox）
3. type参数不再独立，合并到content中
4. closeImg更改为closeIcon，结构为’close’ 或 {type:’icon’, content: ‘close.gif’} 或{type:’string’, content: ‘close’}
5. msgbox的返回值可以直接从外部方式$mb.value得到，其中$mb是msgbox的handle（$mb=$.msgbox(…)）
6. 可以通过参数animation指定不同的动画效果
7. 提供README和CHANGELOG文件，介绍插件详细使用方法
8. 修改其他小bug
下载：
你这个插件有没有什么例子么？ 我想用都不知道该怎么用….
@ViCTor:文章已经更新，4.0的版本也已经发布，请查看文章中的测试页面，其中有详细的用法。你可以在测试页面修改部分代码再运行。
4.0的版本为什么下来 打开JS文件就报错呢?
@z:能说一下报错的内容吗？
楼主，请问提示框怎么让它总是显示在屏幕的中间？？？？？
@hxhui08:你的意思是说要禁止拖拽？
我也不清楚，不过当页面比较长的时候提示信息显示的是在上面 直接是看不到的 只能用鼠标拉上去才能看到提示信息
还有就是如何调用关闭窗口的函数
谢谢
@hxhui08:关闭窗口时候的函数，我上面给出的测试页面中有demo，另外，能否说一下你用的什么浏览器，版本是多少？
ie7
@hxhui08:嗯，我明白你说的问题了，这样的确不太方便，我将尽快修复这个问题，十分感谢！
@hxhui08:你提出的问题已经解决，非常感谢！
的确很好用。功能也挺齐全的。非常感谢你的辛勤劳动的成功。感谢分享
@v-far:好东西大家共享
很好哦！！请问下我想把button的yes和no改成中文，怎么修改，谢谢~~
@2009:把253行和261行(4.1版本)对应的Yes和No修改成中文就行了
同样有5楼的这个疑问。当前这个提示框是在一屏内的，如果页面超过1屏，那么提示框出现的位置 是否还在中间？
页面滚动条拖动的时候，提示框也会上下滚动，不知道如何让别人不关掉提示框，就不能上下拖动呢？
@yeyy:你是意思是说，在上下滚动滚动条的时候，让提示框始终在屏幕中间？也就是说，滚动条向下滚动一定距离，提示框就向上滚动相应的距离？
我也和5楼一样的想法，现在的4.2版本把问题解决了吗，如果屏幕特别长，而触发按钮在屏幕最底下，那么BOX的显示位置是否也是当前屏幕的中间呢？
@重剑无锋:屏幕特别长，触发按钮在最底下，box仍在当前屏幕中间，不过当滚动条滚动时，box也会随之滚动，我将考虑在下一版本中，增加box绝对居中的选项。
是的，我就是这个意思，不知道这样如何解决？
把输入框也做了就好了
4.2的版本 一运行页面就报JS错
/// drag div
function drag(o,s)
{
if (typeof o == “string”) o = document.getElementById(o);
o.orig_x = parseInt(o.style.left) – document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) – document.body.scrollTop;
o.orig_index = o.style.zIndex;
o.onmousedown = function(a)
{
this.style.cursor = “move”;
this.style.zIndex = 10000;
var d=document;
if(!a)a=window.event;
var x = a.clientX+d.body.scrollLeft-o.offsetLeft;
var y = a.clientY+d.body.scrollTop-o.offsetTop;
d.ondragstart = “return false;”
d.onselectstart = “return false;”
d.onselect = “document.selection.empty();”
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove = function(a)
{
if(!a)a=window.event;
o.style.left = a.clientX+document.body.scrollLeft-x;
o.style.top = a.clientY+document.body.scrollTop-y;
o.orig_x = parseInt(o.style.left) – document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) – document.body.scrollTop;
}
d.onmouseup = function()
{
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove = null;
d.onmouseup = null;
d.ondragstart = null;
d.onselectstart = null;
d.onselect = null;
o.style.cursor = “normal”;
o.style.zIndex = o.orig_index;
}
}
if (s){
var orig_scroll = window.onscroll?window.onscroll:function (){};
window.onscroll = function (){
orig_scroll();
o.style.left = o.orig_x + document.body.scrollLeft;
o.style.top = o.orig_y + document.body.scrollTop;
}
}
}
建议用这个拖拽函数
真的很不错哦 ,不过颜色是否可以定义一下啊?
还有你的48/8怎么要填写8才可以通过啊?
windows+chrome
无法在外部调用关闭事件~！ 这样很不方便
4.2有个问题，如果页面上本原来就有隐藏的的Select下拉框，
你CloseBox的时候，全部$(‘select’).css(‘visibility’,'visible’);就错了。
4.2版本在ie下父窗口有滚动条。怎么才可以去掉？
ie下弹出窗口后，页面有滚动条！
如何关闭窗口在打开时的淡入效果?我看代码里只找到了,关闭时的淡出效果!
这个功能我没加，可以从透明度来考虑，再慢慢渐变
为什么黑背景有的到不了底，而有的弹出来却出来了好长的滚动条？是否与弹出大小有关系？而且如果我不想要动画的背景效果怎么办？
type为ajax,第二次出发事件时总是报错说:对象不支持此属性或方法.
无标题文档
function msgbox(w,h,dz)
{
$.msgbox({closeImg: ‘images/window/fancy_closebox.gif’,height:h,width:w,content:dz,type :’ajax’,title: ”})
}
@Shine:为了代码简洁点,我又加了层函数.
@boyrichie:你是要在iframe中调用父窗口的,还是要在父窗口调用iframe的?
@boyrichie:
在iframe中调用父窗口的关闭方法，
是这样的情况，我用msgbox的type:’iframe’方式调用一个子页面进行数据操作，在子页面数据提交完成之后，我想将层关闭，请问怎么样调用方法呢。
@boyrichie:很遗憾,你想通过外层控制来关闭这个对话框,这个插件没有这样的功能(因为插件内部无法预知外部的情况),但是你可以通过外层控制来关闭,你可以在iframe中通过top来获得父窗口的DOM,然后删除这个提示框.
hideScrollBar 这个值设为true后， 就能让Div自动显示滚动条吗？ 我设置了后好像没效果。
@tack:这个值的功能不是这样的,这个值仅仅针对firefox的,只能让firefox的页面的滚动条是否消失和出现,对DIV无效.
@tack: 我使用 【文本提示】 的方式，弹出DIV层， 还需要让这个DIV层自动滚动条。 怎么设置呢？
如果我弹出来的内容可能是一个table或者是一段文章。 没有滚动条的话，下面的内容就显示不完整了。
@tack:建议采用iframe的形式
好的，这也是一个办法，谢谢！！
我就是因为不想用iframe形式啊。 用iframe的话，根据项目开发的需求，就需要新建很多页面了。 有点太浪废资源。 如果一个DIV上有滚动条的话，我就可以将table在cs代码中拼接好了， 直接打印出来。 方便高效又结约资源。
@tack:那么你可以尝试一下在显示内容的div($main)的css样式(msgbox_main)overflow的属性值改为scroll(原为hidden)
即overflow: scroll
有没有API文档……?
@xuey:暂时没有…
想知道，一个BOX弹出来的时候，点右上角的“关闭”或者“X”的时候，触发的事件是什么?
不是onclose()，onclose是关闭的时候触发的事件。
我想知道的是，直接关闭层的方法。
@xuey:内部的函数是closeMe，如果启用了动画，先运行动画，然后把层用jQuery的remove方法remove掉（5.0版本的bug，没有remove掉，下一版本中修正），否则直接把层remove掉。
启用了动画是什么… 不懂…
总体说来：就是-不想点右上角的“关闭”或者“X”的话，怎么样来关掉层呢（type:ifrme）.^^
希望下个版本快点更新，解决外部关闭层的问题…^^
@xuey:我明白你的意思,你需要的就是一个外部关闭层的接口,这个也确实很有必要,我正在思考这个问题.
在iframe里面的页面弹出层,能覆盖到父页面吗?
@Shine:4.2版本中的oneboxmode可以实现这个功能，但是在5.0中取消了。
我用的就是4.2的.现在你的demo换成5.0的了 我看不了怎么用了!
我想看以前的demo
很不幸，以前的demo被覆盖掉了。。。
@Shine:在网上找到了3.0的oneboxmode的方法,不知道能不能用啊!
@Shine:看看，如果需要这个功能，我考虑在下一版本中加上。
一定要加啊,这个功能很实用啊!
哇，博主更新速度真快，强烈顶下
在maxthon中，显示有点问题，遮盖层的高度和宽度都不对，高度没有到底部，宽度也向右延长了大概150个像素，出现的滚动条，但是在ＩＥ８中没有问题。
@kuaileshike:你用的maxthon的哪个版本？
能不能加上功能: esc关闭最后一次打开的mbox窗口
@weizheng:你的意思是说 用esc键 也能关闭窗口？
我不太明白你说 关闭最后一次打开的mbox窗口 的意思
function show() {
var content = ” ”
$mb = $.msgbox(content);
}
事实上我是希望能做到在弹出窗口中, 点击按钮再弹出一个mbox; 所以上面的代码会在页面上出现多个mbox; 我希望可以使用esc键将弹出窗口依次关闭, 按照出栈的顺序.
如果做的更好, 希望可以做到弹出子窗口时, 父弹出窗口也被mask上,从而无法操作父弹出窗口. 谢谢!
我用的是“ 2.5.13.166 ”这个版本
找到原因了，在遨游高级选项设置里面有一个“启用 IE8 标准渲染模式 (仅供测试,不建议使用)(需要重启动)”，如果启用了这个就不会有问题，如果不启用就会有问题。
function jconfirm(msg){
$mb=$.msgbox({
content:{type:’confirm’,content:msg}
});
return $mb.value;
}
为什么这样调用返回值始终是false啊?
请问提示层能不能设置透明?
@Chris: 暂时还不能
如果弹窗被拖太上面 把关闭按钮拖没了怎么办。不能关闭了 难道只能刷新吗？
@ssl:双击背景可以关闭
您好，我想实现类似“正在处理中，请稍候……”的提示框，该提示框不能被用户关闭。请问有哪个选项屏蔽“关闭”吗？我现在通过“障眼法”，就是把closeIcon的内容清空，虽然“关闭”栏没内容了，但是，用户点击“关闭”栏还是能关闭。
ps: firefox老是提示验证码出错。
@peccary: 你可以把源码中的closeMe函数注释掉就可以了
ps: firefox提示验证码出错可能是cookie出错,清空cookie试试