【jquery插件】弹出层(Tipswindown)
浏览量:960
Tipswindown开发总结
jquery插件tipswindown，这个弹出的内容可以在本页指定的div上定义（控件，代码等），在后台访问和存储数据的时候都比较方便，所以使用它。具体的步骤如下：
第一步：加入对应的jquery.js，tipswindown.js代码：
<script src="js/jquery/jquery.js" type="text/javascript"></script> <script src="js/jquery/tipswindow/tipswindown.js" type="text/javascript"></script>
第二步：加入默认的css文件，当然这个是按照自己的需求可以进行修改的。代码：
<link href="js/jquery/tipswindow/tipswindown.css" rel="stylesheet" type="text/css" />
第三步：编写对应的js代码：
<script type="text/javascript">
$(document).ready(function() {
$("#btnSetType").click(function() {
tipsWindown("标题","id:showType","350","150","true","","true","id")
});
});
</script>btnSetType就是在之后的页面中定义的<input type=button>的id，对于tipsWindown函数说明如下：
顺序 | 参数 | 功能 | 备注 | |
1 | title | 弹出层的标题 | 必填，纯文本 | |
2 | content | 弹出层的内容 | text | 文本内容 |
id | 页面里某id的标签 | |||
img | 图片 | |||
url | get或post某一页面里的html，该页面要求只包含body的子标签 | |||
iframe | 目标地址在框架显示 | |||
3 | width | 弹出层的宽 | 必填，比如“200”。（不需要带px） | |
4 | height | 弹出层的高 | 同 width | |
5 | drag | 是否可拖动 | 必填，可选参数（true,false） | |
6 | time | 自动消失时间 | 可不填，默认不自动关闭；参数可为空("") | |
7 | showbg | 是否显示遮罩层 | 可不填，默认不显示（此项如填了，它前面的time也必须要填） | |
8 | cssName | 弹出层附加样式名 | 可不填 | |
第四步：定义对应的html代码和弹出层内容，代码：
<input type="button" value="弹出" id="btnSetType" /> <div id="showType" style="display:none;"> 我是弹出层内容！ </div>
当然在页面初始打开的时候不需要显示showType的div所以需要将其display设置为none。
插件可以继续修改完善：tipsWindown(title,content,width,height,drag,time,showbg,weizhi,boxcssName,backcall)
感谢支持与鼓励～