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 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
Vue实现选择城市功能
May 27 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
koa-router源码学习小结
2018/09/07 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
Python3访问并下载网页内容的方法
2015/07/28 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
PyTorch中的Variable变量详解
2020/01/07 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
python能否java成为主流语言吗
2020/06/22 Python
Python图像读写方法对比
2020/11/16 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
护士专业推荐信
2013/11/02 职场文书
师范学院教师自荐书
2014/01/31 职场文书
机械专业求职信范文
2014/07/15 职场文书
初中优秀学生评语
2014/12/29 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL