TinyBox已经存在很久了，一直用保存下来的版本，突然发现它升级到2.0了，新增了许多新功能，但是大小依然在5KB左右(5.35KB)，依然非常强大，升级后的脚本支持iframes 和 images弹出层，还可以使用Ajax读取，不过ajax只支持POST数据，cms大学小编测试了get请求并不支持，并且加载和关闭事件回调参数，已经足够大家的自定义需求。而本插件最大的优点在于不需要依赖jquery，在不需要jq的页面会更有优势。
用法示例
折叠JavaScript 代码
- //弹出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 |
本插件在IE7+, FF, Chrome, Opera均有不错的效果。
下载地址：点击下载
相关文章
-
- 使用jquery-ias.min.js插件做帝国cms的下拉无限加载
-
今天在cms大学小编在Github上闲逛，发现了一个名为Infinite AJAX Scroll的开源项目，使用它来通过很简单的程序配置，就可以让帝国cms支持分页Ajax下拉无限加载功能。专程进行了测&nbs
2503
-
- 帝国CMS7.2实现地区三级联动并且前台可地区筛选的插件教程
-
今天cms大学给大家分享一款帝国cms的三级联动插件，优势是可以自己设定区域，修改相关地区数据，接下来我们看一下使用步骤。第一步：后台添加三个数据表字段字段名：pro 字段标识：省&nbs
2239
-
- 帝国CMS二次开发扩展SQL程序、插件编写介绍
-
例1：连接MYSQL程序。(a.php) 折叠展开PHP 代码 <?php require('e/class/connect.php'); //引入数据库配置文件和公共函数文件 require('e/class/db_sql.php'&nbs
1549
-
- PHP与jquery、AJAX使用简单教程，快速看懂ajax和json传值
-
其实ajax非常简单，但有很多地方需要注意，稍有不慎就有可能出错，编写程序还需大胆心细，不气不馁。首先要注意几点：1、 ajax 的dataType类型如果是json 则必须转成json. 如：echo js&nbs
2874
-
- php+jquery+ajax+json简单例子，让你快速学会ajax
-
很多新手一直对ajax充满恐惧，觉得非常复杂，很难入手。下面给大家提供一个简单的例子，只要有jq和php基础，非常容易看懂，并进一步扩展出更复杂的功能。 一、html页面部分折叠展开X&nbs
2050
