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 OOP包机制,类创建的方法定义
Nov 02 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php字符串截取的简单方法
2013/07/04 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
玩转方法:call和apply
2014/05/08 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
JS实现图片切换特效
2019/12/23 Javascript
JS实现随机点名器
2020/04/12 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
python pdb调试方法分享
2014/01/21 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
详解Python的循环结构知识点
2019/05/20 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
青年文明号服务承诺
2014/03/31 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
会计电算化实训报告
2014/11/04 职场文书
2014年环保工作总结
2014/11/26 职场文书
MySQL创建管理KEY分区
2022/04/13 MySQL
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS