提示信息的窗口效果

ExpandedBlockStart.gif代码
<!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>
    <title>提示信息的窗口效果</title>

    <script type="text/javascript" src="jquery-1.4.1.js"></script>

    <style type="text/css">
        .css_window
        {
            background-color: #D0DEF0;
            width: 250px;
            padding: 2px;
            margin: 5px;
            position: absolute;
            display: none;
        }
        .css_window_title
        {
            padding: 2px;
            font-size: 14px;
        }
        .css_window_title span
        {
            float: right;
            font-size: 12px;
            color: blue;
            cursor: pointer;
        }
        .css_window_content
        {
            height: 150px;
            background-color: White;
            font-size: 13px;
            overflow: auto;
        }
    </style>

    <script type="text/javascript">

        /*
        @param position         窗口最终位置，包含left和top属性
        @param hidefunc         执行窗口隐藏的方法
        @param initPosition     窗口初始化位置，包含left和top属性
        */
        $.fn.show_window = function(position, hidefunc, initPosition) {
            //当前窗口
            var cwin = this;
            //当前窗口的宽和高
            //outerXXX()参数为true时包含padding,margin……的值
            var cwind_width = this.outerWidth(true);
            var cwind_height = this.outerHeight(true);

            //最终确定的left和top
            var left;
            var top;

            //用于判断输入的值
            var p_left = position.left;
            var p_top = position.top;

            //游览器窗口的宽和高，滚动条的左边界值和上边界值
            var browser_width;
            var browser_height;
            var scroll_left;
            var scroll_top;

            //获取游览器窗口的宽和高，滚动条的左边界值和上边界值
            function getBrowserDim() {
                browser_width = $(window).width();
                browser_height = $(window).height();
                scroll_left = $(window).scrollLeft();
                scroll_top = $(window).scrollTop();
            }

            function setleft(p_left, scroll_left, browser_width, cwind_width) {
                //设置left
                if (p_left && typeof p_left == "string") {
                    if (p_left == "center") left = scroll_left + (browser_width - cwind_width) / 2;
                    else if (p_left == "left") left = scroll_left;
                    else if (p_left == "right") left = scroll_left + browser_width - cwind_width;
                    else left = scroll_left + browser_width - cwind_width;
                }
                else if (p_left && typeof p_left == "number") {
                    left = p_left;
                }
                else {
                    left = 0;
                }
            }

            function settop(p_top, scroll_top, browser_height, cwind_height) {
                //设置top
                if (p_top && typeof p_top == "string") {
                    if (p_top == "center") top = scroll_top + (browser_height - cwind_height) / 2;
                    else if (p_top == "top") top = scroll_top;
                    else if (p_top == "bottom") top = scroll_top + browser_height - cwind_height;
                    else top = scroll_top + browser_height - cwind_height;
                }
                else if (p_top && typeof p_top == "number") {
                    top = p_top;
                }
                else {
                    top = 0;
                }
            }

            //移动窗口
            function moveWin() {
                setleft(p_left, scroll_left, browser_width, cwind_width);
                settop(p_top, scroll_top, browser_height, cwind_height);
                //cwin.css("left", left).css("top", top);
                //使用动画的方式改变left和top
                cwin.animate({ left: left, top: top }, 600);
            }

            //关闭
            cwin.children(".css_window_title").children("span").click(function() {
                if (!hidefunc) cwin.hide("slow");
                else hidefunc();
            });


            //窗口初始位置
            if (initPosition && initPosition instanceof Object) {
                var init_left = initPosition.left;
                var init_top = initPosition.top;

                if (init_left && typeof init_left == "number")
                    cwin.css("left", init_left);
                else
                    cwin.css("left", 0);

                if (init_top && typeof init_top == "number")
                    cwin.css("top", init_top);
                else
                    cwin.css("top", 0);

                cwin.show();
            }

            //初始化页面
            cwin.data("p_left", p_left); //保存p_left;
            cwin.data("p_top", p_top); //保存p_top;
            getBrowserDim();
            moveWin();

            //注册滚动条的滚动事件
            var scrollTimeout;
            $(window).scroll(function() {
                //判断当前窗口是否可见
                if (!cwin.is(":visible"))
                    return;
                //延时300毫秒防止闪烁
                clearTimeout(scrollTimeout);
                setTimeout(function() {
                    getBrowserDim();
                    moveWin();
                }, 300);
            });

            //注册游览器大小改变的事件
            $(window).resize(function() {
                getBrowserDim();
                moveWin();
            });

            return cwin;
        }


        $(function() {

            setTimeout(function() {
                //窗口（中间)
                $("#css_window_center")
            .show_window({ left: "center", top: "center" })
            .show("slow");

                //窗口（左下)
                var lb = $("#css_window_leftbottom").show_window({ left: "left", top: "bottom" }, function() {
                    lb.slideUp("slow");
                });
                lb.show("slow");

                //窗口（右下)
                var browser_width = $(window).width();
                var browser_height = $(window).height();
                var scroll_left = $(window).scrollLeft();
                var scroll_top = $(window).scrollTop();
                var cwind_width = $("#css_window_rightbottom").outerWidth(true);
                var cwind_height = $("#css_window_rightbottom").outerHeight(true);
                var rb = $("#css_window_rightbottom").show_window(
                            { left: "right", top: "bottom" }, function() { rb.hide(); },
                            {
                                left: scroll_left + browser_width - cwind_width,
                                top: scroll_top + browser_height
                            })
                .fadeOut(15000).dequeue();
                rb.show("slow");
            }, 500);
        });
    </script>

</head>
<body>
    <div id="css_window_center" class="css_window">
        <div class="css_window_title">
            <span>关闭</span> 提示信息的窗口（中间）
        </div>
        <div class="css_window_content">
            提示信息的窗口（中间） 内容
        </div>
    </div>
    <div id="css_window_leftbottom" class="css_window">
        <div class="css_window_title">
            <span>关闭</span> 提示信息的窗口（左下）
        </div>
        <div class="css_window_content">
            提示信息的窗口（左下） 内容
        </div>
    </div>
    <div id="css_window_rightbottom" class="css_window">
        <div class="css_window_title">
            <span>关闭</span> 提示信息的窗口（右下）
        </div>
        <div class="css_window_content">
            提示信息的窗口（右下） 内容
        </div>
    </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/xyjblog/archive/2010/02/18/1669244.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/435637.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【转】C++中如何区分构造函数与重载operator()得到的仿函数?

【转】C++中如何区分构造函数与重载operator()得到的仿函数?

转自&#xff1a;C中如何区分构造函数与重载operator()得到的仿函数?求大神!_360问答 此外,你觉得仿函数(functor)是否能完全取代function呢? 以下是个人使用C仿函数&#xff0c;function表达式的一些体悟。 首先是定义形式&#xff1a; 构造函数无返回值&#xff0c;而o…
阅读更多...
WINCE添加新字体需要注意的一些问题

WINCE添加新字体需要注意的一些问题

之前测试使用dgwulm.ttf字体&#xff08;GPS软件WolfNCU中带的&#xff09;&#xff0c;发现了一些添加新字体的时候可能被忽视的问题。 在WINCE系统中&#xff0c;除了将字体文件加入到系统内核NK之外&#xff0c;还可以动态的方式添加新字体&#xff0c;使用函数AddFontReso…
阅读更多...
开源CRM Hipergate

开源CRM Hipergate

Hipergate是一个用java写的开源CRM。有一个在线演示的Demo(http://demo-en.hipergate.org/)&#xff0c;并且支持中文。 该软件运行的屏幕截图请看这里&#xff1a;http://www.hipergate.org/docs/screenshots/ 开发语言&#xff1a; Java 操作系统&#xff1a; 跨平台 软件主…
阅读更多...
【转】RAX,eax,ax,ah,al 关系

【转】RAX,eax,ax,ah,al 关系

转自&#xff1a;RAX,eax,ax,ah,al 关系_迪迦 • 奥特曼-CSDN博客_rax和eax |63..32|31..16|15-8|7-0||AH.|AL.||AX.....||EAX............| |RAX...................|一般寄存器:AX、BX、CX、DX AX:累积暂存器&#xff0c;BX:基底暂存器&#xff0c;CX:计数暂存器&#xff0c…
阅读更多...
MSDN中关于链接字体的解释（非常有用）

MSDN中关于链接字体的解释（非常有用）

Windows Embedded CE提供了链接字库的能力&#xff0c;它可以将一个或多个字库链接到另一个字库上&#xff0c;前者称为被链接字库&#xff0c;后者称为基本字库。一旦你链接了字库&#xff0c;你就可以使用被链接的字库显示在基本字库中不存在的码字。比如&#xff0c;将日文字…
阅读更多...
sharepoint站点移植方案

sharepoint站点移植方案

1、备份网站和内容数据库 "%systemdrive%\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN\stsadm.exe" -o backup -url http://172.18.33.238:8000 -filename "E:\backup\%date:~0,10%.data" –overwrite 2、备份文件系统…
阅读更多...
【转】ARM 之七 主流编译器（armcc、iar、gcc for arm、LLVM(clang)）详细介绍

【转】ARM 之七 主流编译器（armcc、iar、gcc for arm、LLVM(clang)）详细介绍

转自&#xff1a;ARM 之七 主流编译器&#xff08;armcc、iar、gcc for arm、LLVM(clang)&#xff09;详细介绍_itexp-CSDN博客_armcc 必备 在讲解各编译器之前&#xff0c;必须先了解一下以下文件。这些文件在编译器目录下或者编译生成目标平台的可执行程序时经常见到。此外&a…
阅读更多...
WinCE内核裁减（中文字体）及字库和内核的分离

WinCE内核裁减（中文字体）及字库和内核的分离

每次定制中文系统时&#xff0c;NK总是比英文大10M左右&#xff0c;启动时在bootloader中将内核Copy到内存时也花时间&#xff0c;同时也占用了很多内存&#xff0c;留给系统和应用的内存就少了10M左右&#xff0c;真是浪费呀&#xff0c;看到都心痛&#xff01;本人研究了一下…
阅读更多...
【转】深入浅出理解有限状态机

【转】深入浅出理解有限状态机

转自&#xff1a;深入浅出理解有限状态机 - 知乎 有限状态机是一种用来进行对象行为建模的工具&#xff0c;其作用主要是描述对象在它的生命周期内所经历的状态序列&#xff0c;以及如何响应来自外界的各种事件。在计算机科学中&#xff0c;有限状态机被广泛用于建模应用行为、…
阅读更多...
2010读书计划

2010读书计划

跟别人学着将今年想看的书发出来&#xff1a; 1.Implementing Lean Software Development --Mary and Tom Poppendieck 2.沉浮 3.Algorithm of the intelligent web --haralambos Marmanis 4.数据结构-严蔚敏 还有今年是比较重要的一年&#xff0c;加油。。。转载于:https://ww…
阅读更多...
wince 环境变量

wince 环境变量

wince工程的环境变量在PBInitEnv.bat文件中存储&#xff0c;经测试&#xff0c;如果在下面增加了新的变量&#xff0c;在此文件中会出现
阅读更多...
【转】vs平台工具集介绍，vc6~vs2019各IDE对应的工具集版本

【转】vs平台工具集介绍，vc6~vs2019各IDE对应的工具集版本

转自&#xff1a;vs平台工具集介绍以及安装 - jack_Meng - 博客园 一、什么是平台工具集&#xff1a; 平台工具集其实是MSBuild其目录所在C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0。VS从2010之后开始支持使用之前的版本进行编译&#xff0c;可以在工程属性->常…
阅读更多...
基于FPGA的前向纠错算法

基于FPGA的前向纠错算法

目前&#xff0c;无线产品的广泛应用使无线音频和视频的高质量传输成为可能。蓝牙、无限局域网等无线传输设备比较复杂&#xff0c;成本较高&#xff0c;急需 开发一种简便的、仅用于流媒体的无线传输平台&#xff0c;将音频数据实时地发送到移动终端。由于音频数据的实时性&am…
阅读更多...
wince编译时找不到atls.lib

wince编译时找不到atls.lib

NMAKE : fatal error U1073: dont know how to make C:\WINCE600\OSDesigns\x210\x210\Wince600\SMDKV210_ARMV4I\cesysgen\oak\lib\ARMV4I\retail\atls.lib 需要选择ATL
阅读更多...
【转】Windows版本，OS内核版本，Windows SDK之间的关系

【转】Windows版本，OS内核版本，Windows SDK之间的关系

转自&#xff1a;Windows版本&#xff0c;OS内核版本&#xff0c;Windows SDK之间的关系 - 知乎 前言&#xff1a;我们经常会会被几个概念弄混淆&#xff0c;什么是Windows版本号&#xff0c;什么又是操作同内核版本&#xff0c;开发C的时候什么又是WindowsSDK&#xff0c;实际…
阅读更多...
ADO.NET Entity Framework 使用中的经验总结

ADO.NET Entity Framework 使用中的经验总结

ADO.Net EF框架非常的灵活&#xff0c;好的习惯可以提高性能&#xff0c;而不好的习惯就会减少性能&#xff0c;为了提高性能简化开发&#xff0c;总结网络给出下面的经验。 1.如果要扩展实体类的功能&#xff0c;应该通过“部分类”(partial)实现 2.如果需要借助ObjectContext…
阅读更多...
怎样在PropertySheet中添加按钮

怎样在PropertySheet中添加按钮

1、用ClassWizard从CPropertySheet中派出出一个类CMyPropertySheet; 2、在CMyPropertySheet.h中添加一个成员变量CButton m_ButtonCopy;在资源文件resource.h中添加一个资源ID:#define IDC_BUTTON_COPY 0x2000&#xff0c;这个ID就是我们将要用到的Copy按钮的ID&#xff…
阅读更多...
【转】30分钟学会UML类图

【转】30分钟学会UML类图

转自&#xff1a;30分钟学会UML类图 - 知乎 30分钟学会UML类图 肖继潮 UML图有很多种&#xff0c;但是并非必须掌握所有的UML图&#xff0c;才能完整系统分析和设计工作。一般说来&#xff0c;在UML图中&#xff0c;只要掌握类图、用例图、时序图的使用&#xff0c;就能完成大…
阅读更多...
Microsoft SQL Server 2005数据库安装

Microsoft SQL Server 2005数据库安装

Microsoft SQL Server 2005数据库&#xff0c;电脑里原有的mssql2000已经不适用了&#xff0c;到网上寻找SQL Server 2005简体中文开发版的下载地址&#xff0c;一开始下载了个学习版的express&#xff0c;可限制太多&#xff0c;还是决心安装开发版本的。到微软的官方网站寻找…
阅读更多...
深入浅出 CPropertySheet

深入浅出 CPropertySheet

为了最大限度的发挥属性页的效用&#xff0c;首先让我们先从 CPropertySheet 继承一个新类&#xff0c;取名为 CMyPropSheet. 接着便可以进行下面的各种操作: 一、隐藏属性页默认按钮 隐藏掉Apply应用按钮: view source print?1.propsheet.m_psh.dwFlags | PSH_NOAPPLY…
阅读更多...
最新文章

Copyright @ 2022~2023