JS中frameset框架弹出层实例代码


Posted in Javascript onApril 01, 2016

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

首先我们的项目是用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文件。

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

JS中frameset框架弹出层实例代码

此效果图在IE8下正常运行,谷歌兼容。有关frameset 弹出层效果小编就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
js实现div色块碰撞
Jan 16 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 #Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 #Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 #Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 #Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 #Javascript
基于jquery实现轮播焦点图插件
Mar 31 #Javascript
javascript中错误使用var造成undefined
Mar 31 #Javascript
You might like
我的论坛源代码(六)
2006/10/09 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JS target与currentTarget区别说明
2011/08/28 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
wxPython实现分隔窗口
2019/11/19 Python
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
签约仪式主持词
2014/03/19 职场文书
校庆标语集锦
2014/06/25 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
公司感谢信范文
2015/01/22 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
教师研修随笔感言
2015/11/18 职场文书
求职自我评价参考范文
2019/05/16 职场文书