新学习之 jQuery-boxy
上次需要做一个，点击一个控件弹出一个层，就相当于一个对话框，想着自己js写太麻烦了，于是在网上找相应的js代码，不过不过不负有心人，找到了一个jquery插件，虽然没有觉得以前早就觉得比js方便多了，但是还是没有去学习，很少用，不过慢慢的觉得它的魅力也慢慢的展现出来了...
好的，我们还是一样 先引入 对插件的支持:
例如：
另外我们还得加几个文件也是这个插件里面自带的，是为了显示出所弹出的这个对话框的样式，
这四个小图片是显示在弹出框的四个角的。
另外能要正常应用该图片还需要去修改css图片的路径
另外如果是用jsp引用该插件，那么一定要用w3c标准了，就是必须在页面前端加上
如果不加上面的话，ie显示会有问题...
下面就写几个常用的方法：
1.Boxy.alert("内容",动作);
2.Boxy.confirm("内容",动作,{参数1:"",参数2:});
3.自定义对话框
以下还有一些方法,属性，已经css的样式解释，这里就不写了，以后自己去慢慢了解.
好的，我们还是一样 先引入 对插件的支持:
例如：
<srcipt type="text/javascript" src="js/jquery.boxy.js"></srcipt>
另外我们还得加几个文件也是这个插件里面自带的，是为了显示出所弹出的这个对话框的样式，
<link type="text/css" rel="stylesheet" href="css/boxy.css"/>
[1]boxy-ne.png
[2]boxy-nw.png
[3]boxy-se.png
[4]boxy-sw.png
这四个小图片是显示在弹出框的四个角的。
另外能要正常应用该图片还需要去修改css图片的路径
/* Border */
.boxy-wrapper{empty-cells:show;}
.boxy-wrapper .top-left,.boxy-wrapper .top-right,.boxy-wrapper .bottom-right,.boxy-wrapper .bottom-left{width:10px; height:10px; padding:0}
.boxy-wrapper .top-left{background:url('../images/boxy/boxy-nw.png');}
.boxy-wrapper .top-right{background:url('../images/boxy/boxy-ne.png');}
.boxy-wrapper .bottom-right{background:url('../images/boxy/boxy-se.png');}
.boxy-wrapper .bottom-left{background:url('../images/boxy/boxy-sw.png');}
/* IE6+7 hacks for the border. IE7 should support this natively but fails in conjuction with modal blackout bg. */
/* NB:these must be absolute paths or URLs to your images */
.boxy-wrapper .top-left{#background:none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/boxy/boxy-nw.png');}
.boxy-wrapper .top-right{#background:none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/boxy/boxy-ne.png');}
.boxy-wrapper .bottom-right{#background:none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/boxy/boxy-se.png');}
.boxy-wrapper .bottom-left{#background:none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/boxy/boxy-sw.png');}
另外如果是用jsp引用该插件，那么一定要用w3c标准了，就是必须在页面前端加上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
如果不加上面的话，ie显示会有问题...
下面就写几个常用的方法：
1.Boxy.alert("内容",动作);
$('al').click(function(){
Boxy.alert("警告了!",function(){
alert('colse');
});
return false;
});
2.Boxy.confirm("内容",动作,{参数1:"",参数2:});
$('al').click(function() {
Boxy.confirm("Please confirm?", function() { alert("Confirmed!"); },{title:"测试"});
return false;
});
3.自定义对话框
$('#al').click(function() {
new Boxy("<div><a href='#'>内容，这次我放的是地图</a>",
{
title:"你好", //标题
closeText:"[关闭]", //关闭文字
modal:true, //背景是否变暗
fixed:true, //窗口是否固定
cache:true, //是否被遮挡
draggable:true, //这个设定窗口是否可以拖动，要定义title才有效，设定了modal就无效
center:true, //弹出对话框是否居中
x:50,
y:50, //设定窗口位置值为％多少，设定此后center会被覆盖
afterDrop:function(){}, //关闭对话框后执行的｛IE下面关闭不了,原因不明｝
afterShow:function(){}, //打开对话框后执行的
afterHide:function(){} //隐藏对话框后执行的
});
return false;
});
以下还有一些方法,属性，已经css的样式解释，这里就不写了，以后自己去慢慢了解.