可心专栏

编程的世界

弹出层之3:JQuery.tipswindow

 
tipswindow是一个很一般的JQuery弹出层插件,但使用简单,有相对漂亮的外观,代码比较通俗。下面介绍使用方法:

1、首先引入该插件相关文件,分别是样式,JQuery库,该插件

    <link href="tipswindown.css" rel="stylesheet" type="text/css" />
    <script src="../Contents/JS/jquery-1.5.js" type="text/javascript"></script>
    <script src="tipswindown.js" type="text/javascript"></script>

2、修改tipswindow.css文件中图片的路径,默认与css文件在同一个目录下。
3、编写代码,如在图片上设置单击事件后放大显示图片:

<!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">
<head>
    <link href="tipswindown.css" rel="stylesheet" type="text/css" />
    <script src="../Contents/JS/jquery-1.5.js" type="text/javascript"></script>
    <script src="tipswindown.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#imgTest").click(function() {
                tipsWindown("标题:风景", "img:" + this.src, "640", "480", "true", "", "true", "img");
            });
            /*
            function tipsWindown(title, content, width, height, drag, time, showbg, cssName) 
            title: 窗口标题
            content:  内容(可选内容为){ text | id | img | url | iframe }
            width: 内容宽度
            height: 内容高度
            drag:  是否可以拖动(ture为是,false为否)
            time: 自动关闭等待的时间,为空是则不自动关闭
            showbg: [可选参数]设置是否显示遮罩层(0为不显示,1为显示)
            cssName:  [可选参数]附加class名称
            */
        });
    </script>
</head>
<body>
    <img src="../Contents/Images/wallpager/Autumn_A_1.jpg" width="400" height="300" id="imgTest" />
</body>
</html>

 

其它用法网友总结如下:
1.弹出文本信息提示:
tipsWindown("提示","text:提示信息内容","250","150","true","","true","msg")

2.弹出页面中的某个ID的html:
tipsWindown("标题","id:testID","300","200","true","","true","id")

3.弹出图片:
tipsWindown("图片","img:图片路径","250","150","true","","true","img")

4.get加载一个.html文件(也可以是.php/.asp?id=4之类的):
tipsWindown("标题","url:get?test.html","250","150","true","","true","text");

5.加载一个页面到框架显示:
tipsWindown("标题","iframe:http://leotheme.cn","900","580","true","","true","leotheme");

6.弹出一个不能拖动且没有遮罩背景的文本信息层:
tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")

7.弹出一个不能拖动,三秒钟自动关闭的层:
tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")

 

1、下载本文示例
2、下载官方最新示例与框架(推荐)

官网:http://leotheme.cn/javascript/jquery-plugins-tipswindow-2-0.html

 

阅读更多
个人分类: ajax/javascript
想对作者说点什么? 我来说一句

iphone 弹出层

2011年10月08日 1.08MB 下载

DIV弹出层 DIV弹出层DIV弹出层

2010年04月21日 2KB 下载

各种弹出层设计 css js

2009年08月19日 12KB 下载

面向对象弹出层面向对象弹出层

2009年06月25日 101KB 下载

弹出层选择省份juqery

2010年11月20日 20KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭