jquery插件——弹出层(Tipswindown)

Tipswindown开发总结

 

之前在做弹出页的时候使用了jquery的GreyBox（博文：http://blog.csdn.net/shellwin/archive/2010/05/30/5634674.aspx），但是在使用过程中是弹出了别的页面，这在本页面的数据访问比较麻烦。这次在做项目中的高级查询的时候想仿照一下51job上面的弹出层进行实现，找到了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>

**************

<a href='javascript:tipsWindown("应用详情","iframe:{AI9ME::C('site_url')}/{AI9ME::U('Classify/app_content',array('id'=>$vo['id']))}","720","480","true","","true","leotheme");'>详情</a></div>

******************

当然在页面初始打开的时候不需要显示showType的div所以需要将其display设置为none。

 

它的整个使用就那么简单，有对应其他的一些demo和文中使用的js和css下载地址如下：

http://download.csdn.net/source/2587353