TinyBox已经存在很久了,一直用保存下来的版本,突然发现它升级到2.0了,新增了许多新功能,但是大小依然在5KB左右(5.35KB),依然非常强大,升级后的脚本支持iframes 和 images弹出层,还可以使用Ajax读取,不过ajax只支持POST数据,cms大学小编测试了get请求并不支持,并且加载和关闭事件回调参数,已经足够大家的自定义需求。而本插件最大的优点在于不需要依赖jquery,在不需要jq的页面会更有优势。
用法示例
- //弹出test.html页面,并设置了宽高300x150px
- TINY.box.show({url:'test.html',width:300,height:150})
- //No Animation, No Close Button, Auto Width/Height, Custom Styling
- TINY.box.show({html:'This is a warning!',animate:false,close:false,boxid:'error',top:5})
- //Ajax Post, Fixed Width/Height, Light Mask, Custom Vertical Split
- TINY.box.show({url:'post.php',post:'id=16',width:200,height:100,opacity:20,topsplit:3})
- //Custom Position, No Mask, Auto-Hide
- TINY.box.show({html:'The entry has been updated successfully!',animate:false,close:false,mask:false,boxid:'success',autohide:2,top:-14,left:-17})
- //iFrame, Blue Mask, Absolute Position, Frameless, Close Callback
- TINY.box.show({iframe:'http://www.ipastimes.com/',boxid:'frameless',width:750,height:450,fixed:false,maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})
- //Ajax, Advanced Functions
- TINY.box.show({url:'advanced.html',width:300,height:150})
- //Image, Load Callback
- TINY.box.show({image:'images/rhino.jpg',boxid:'frameless',animate:true,openjs:function(){openJS()}})
参数详解:
标签(tag) | 描述(description) | 默认(default) |
html | 弹出窗口内容,(String) | false |
iframe | 嵌入URL内容,(String) | false |
url | ajax请求路径,(String) | false |
post | 传送变量,通常配合url使用,(String) | false |
image | 图片路径,(String) | false |
width | 预设宽度,(int) | false |
height | 预设高度,(int) | false |
animate | 动画(bool) | true |
close | 关闭按钮(bool) | true |
openjs | 打开事件回调函数 | null |
closejs | 关闭事件回调函数 | null |
autohide | 显示用户设置时间后自动隐藏(int) | false |
boxid | CSS ID 作用于box | ‘’ |
maskid | CSS ID 作用于mask | ‘’ |
fixed | 绝对位置 | true |
opacity | 透明度 | 70 |
mask | toggle mask display (bool) | true |
top | 类似css top (int) | null |
left | 类似css left (int) | null |
topsplit | 1/x where x is the denominator in the split from the top (int) | 2
|