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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
jquery 图片轮换效果
2010/07/29 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
python 8种必备的gui库
2020/08/27 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
开办饭店创业计划书
2013/12/28 职场文书
学习型党组织心得体会
2014/09/12 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
2014年财政局工作总结
2014/12/09 职场文书
史上最牛的辞职信
2015/02/28 职场文书
新闻报道稿范文
2015/07/23 职场文书
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电