zoukankan      html  css  js  c++  java
  • frameset框架弹出层

         前段时间做项目,有个功能是消息提醒。 我相信很多大牛都做过。下面来分享我遇到的问题和解决方案。

         首先我们的项目是用frameset框架,main代码。

    <frameset name="myFrame" cols="85,*" frameborder="no" border="0" framespacing="0">
        <frame src="${base}/left.jsp" name="leftFrame" frameborder="no" scrolling="auto" noresize="noresize" 
    id="leftFrame" />    
        <frame src="${base}/welcome.jsp" name="mainFrame"   frameborder="no" scrolling="auto"  noresize="noresize" 
    id="mainFrame" />
    </frameset>

      这样分了左右两个部分。

       要求是无论在哪个页面当点击消息图标的时候。能再右下角弹出消息提示。

       这个我还真没做过。当时查阅了很多的资料。然后先是找到了jquery的message插件。后来又找到了如何操作父框架的js,然后这个问题就解决了。

       因为我left.jsp是菜单导航。它是不变的。所以我就把消息图标放在了left中。

      left.jsp页面中的js函数:

    function openMsg(msgType){
        //调用父窗体的获取消息js
        window.parent.getMessage(msgType);
    }
    

    这是在left中的打开消息的js函数。msgType表示的是消息状态.

    window.parent 功能:返回父窗口

    注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。

    在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。

    那么用这个方法我们就能直接调用main的getMessage()函数了。

    main中的getMessage()函数:

    function getMessage(msgType){
        /*$.messager.lays(width, height);
         *该方法主要用来定义弹出窗口的宽度和高度。
         */
        $.messager.lays(200, 150);
        var msg="无消息"
        if(msgType==1){
            msg="jqueryMessage新消息提醒";
        }else{
            msg="jqueryMessage已提醒消息";
        }
        /*$.messager.show(title,text,time);
         *该方法主要定义窗口显示的内容,以及窗口显示多长时间后进行隐藏。
         *如果使用默认的标题,则将title设置为0,另外title和text还可以设置为html内容进行显示。如果希望用户点击弹窗的关闭按钮才关闭     
                *消息框,可将time设置为0。
         */
        $.messager.show("消息提醒",msg);
    }
    </script>

    还有$.messager.anim(type,speed);

    该方法主要定义窗口以什么样的方式和速度呈现。

    $.messager.anim("fade",1000); //以fadeIn的动画方式显示

    $.messager.anim("show",1000); //以show的动画方式显示

    那么,上面简单的介绍了下jquery的message插件中常用的几个方法

    当然,要想使用我们就要在页面引入jquery.js和jquery.messager.js文件。

    通过这么一组合,我们就完成了整个这套功能。

    IE8 下正常运行。

    附上整个源码:IE8弹出层下载

    高版本IE和谷歌浏览器兼容运行方法(含源码):

    由于jquer.messager 的弹出层是在body 追加的。但是在高版本浏览器里frameset和 body是不会同时显示的。

    解决办法就是新建一个index.html,在这个页面用iframe引用frameset页面来解决:

    <script> 
    	function getMessage(msgType){
        /*$.messager.lays(width, height);
         *该方法主要用来定义弹出窗口的宽度和高度。
         */ 
        $.messager.lays(200, 150);
        var msg="无消息"
        if(msgType==1){
            msg="jqueryMessage新消息提醒";
        }else{
            msg="jqueryMessage已提醒消息";
        }
        /*$.messager.show(title,text,time);
         *该方法主要定义窗口显示的内容,以及窗口显示多长时间后进行隐藏。
         *如果使用默认的标题,则将title设置为0,另外title和text还可以设置为html内容进行显示。如果希望用户点击弹窗的关闭按钮才关闭     
                *消息框,可将time设置为0。
         */
        $.messager.show("消息提醒",msg);
    
    } 
    </script> 
      
    <body style="100%;height:100%;overflow: hidden;border:none;margin:0" > 
    <iframe id="main_div_warp" src="main.html" style="100%;height:100%" frameBorder="0"></iframe> 
    </body> 
    

    在main.html要做改变:

    <script>
        function getMessage(msgType){ 
        //调用父窗体的获取消息js
            window.parent.getMessage(msgType);
        }
    </script>
    

    left.html不变

    附上Google兼容源码:高版点此下载

  • 相关阅读:
    boost::asio在VS2008下的编译错误
    Java集合框架——接口
    ACM POJ 3981 字符串替换(简单题)
    ACM HDU 1042 N!(高精度计算阶乘)
    OneTwoThree (Uva)
    ACM POJ 3979 分数加减法(水题)
    ACM HDU 4004 The Frog's Games(2011ACM大连赛区第四题)
    Hexadecimal View (2011ACM亚洲大连赛区现场赛D题)
    ACM HDU 4002 Find the maximum(2011年大连赛区网络赛第二题)
    ACM HDU 4001 To Miss Our Children Time (2011ACM大连赛区网络赛)
  • 原文地址:https://www.cnblogs.com/zhangnanblog/p/jqueryMessage.html
Copyright © 2011-2022 走看看