• 弹出层之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 }
                 内容宽度
                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

  • 相关阅读:
    thinkphp使用ajax程序报500错误
    非隐藏转发和隐藏转发的区别及选择
    表单文件(图片)上传到服务器,权限自动变成363,无法访问
    我收到了互联网应急中心的通报!记sqlmap的正确打开方式。
    css字体可以小于12px!被小米官网打脸
    阿里云CDN添加域名80端口和443端口什么区别?
    网站使用海外服务器,国内访问很慢的解决方案
    linux下设置php文件不区分大小写
    国际化
    Spring boot2.0学习笔记(一)
  • 原文地址:https://www.cnblogs.com/best/p/2193572.html
Copyright © 2020-2023  润新知