iframe实现Outlook的导航菜单

最新推荐文章于 2020-12-11 06:47:01 发布
最新推荐文章于 2020-12-11 06:47:01 发布
阅读量1.6k 收藏
点赞数
分类专栏： Web 文章标签： iframe javascript function url button div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webgl2005/article/details/850812
版权

 


//菜单项对象，包括菜单的title和菜单内页面的url
function MenuItem(title_,url_,iconurl_) {
 this.title = title_;
 this.url = url_;
 this.iconUrl = iconurl_;
 this.iframeId = "";
 this.buttonId = "";
 this.frameLoaded = false; //和菜单关联的iframe是否已经导入了页面
 
}

 


function MenuCanvas(divId_) {//显示菜单的div
 this.nowIndex = 0;
 this.menuHeight = 30;  //菜单按钮的高度 px
 this.width = 300;  //canvas宽 px
 this.height = 700; //canvas高 px
 this.left = 0;  //canvas左上角 x坐标，px
 this.top = 0;  //canvas高 y坐标，px
 this.menuItems = new Array();
 this.divId = divId_;
 this.containerDiv = document.getElementById(this.divId);
 //alert(this.divId);
 //alert(this.containerDiv);
 
 this.addMenuItem = function(item) {
  item.iframeId = 'menuitemframe_' + this.menuItems.length;
  item.buttonId = 'menuitembutton_' + this.menuItems.length;
  this.menuItems[this.menuItems.length] = item;
  
  this.containerDiv.innerHTML += '<iframe id="menuitemframe_' + (this.menuItems.length - 1) + '" src="" style="position:absolute;" MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="0"></iframe>';
  this.containerDiv.innerHTML += '<button id="menuitembutton_' + (this.menuItems.length - 1) + '" style="cursor:hand;position:absolute;background-color:#DDDDDD;border-left:1px  ridge white;border-right:1px groove #AAAAAA;border-top:1px ridge white;border-bottom:1px groove #AAAAAA;" οnmοuseοver="javascript:mouseover(this);" οnmοuseοut="javascript:mouseout(this);" οnclick="javascript:menuClick(' +(this.menuItems.length - 1)+ ');"><img src="' + item.iconUrl + '">' + item.title + '</button>';
 };
 
 this.show = function() {
  var nowy = 0;
  this.containerDiv.style.left = this.left + 'px';
  this.containerDiv.style.top = this.top + 'px';
  this.containerDiv.style.width = this.width + 'px';
  this.containerDiv.style.height = this.height + 'px';
  
  for(var i = 0; i < this.menuItems.length; i++) {
   var item = this.menuItems[i];
   var bt = document.getElementById(item.buttonId);
   bt.style.left = this.left + 'px';
   bt.style.top = nowy;
   bt.style.width = this.width + 'px';
   bt.style.height = this.menuHeight;
   
   nowy += this.menuHeight;
   var fm = document.getElementById(item.iframeId);
   if(this.nowIndex == i) {
    fm.style.left = this.left + 'px';
    fm.style.top = nowy + 'px';
    fm.style.width = this.width + 'px';
    fm.style.height = (this.height - this.menuItems.length * this.menuHeight) + 'px';
    
    nowy += (this.height - this.menuItems.length * this.menuHeight);
    
    if(!item.frameLoaded) {
     document.getElementById(item.iframeId).src = item.url;
     item.frameLoaded = true;
    }
  
   } else {
    fm.style.left = this.left + 'px';
    fm.style.top = this.top + 'px';
    fm.style.width = '0px';
    fm.style.height = '0px';
   }
   
  }
  
 };
 
 this.clickMenu = function(i) {
  if(i < 0 || i > this.menuItems.length)
   return;
   
  this.nowIndex = i;
  //var item = this.menuItems[i];
  //if(!item.frameLoaded) {
  // document.getElementById(item.iframeId).src = item.url;
  // item.frameLoaded = true;
  //}
  
  this.show(); 
 };
}

function mouseover(b) {
 //b.style.borderTop = "2px #FFFFFF";
 //b.style.borderLeft = "2px #FFFFFF"
 b.style.borderRight = "2px groove yellow";
 b.style.borderBottom = "2px groove yellow"
 //document.body.style.cursor = "hand";
}

function mouseout(b) {
 b.style.borderTop = "1px ridge white";
 b.style.borderLeft = "1px ridge white"
 //b.style.borderRight = "0px";
 //b.style.borderBottom = "0px"
 b.style.borderRight = "1px groove #AAAAAA";
 b.style.borderBottom = "1px groove #AAAAAA"
 //document.body.style.cursor = "pointer";
}

function menuClick(i) {
 menus.clickMenu(i);
}

以上为navi.js的内容

 

 

使用方法如下：

<SCRIPT language=javascript src="navi.js"></SCRIPT>

<body οnlοad="javascript:onload();onsize();">
<div id="menudiv">

</div>

<SCRIPT language=javascript>
 var menus;
 function onload() {
  menus = new MenuCanvas('menudiv');
  menus.addMenuItem(new MenuItem('车辆跟踪','test1.htm','images/realtime.gif'));
  menus.addMenuItem(new MenuItem('菜单项2','http://www.google.com/','images/selmap.gif'));
  menus.addMenuItem(new MenuItem('菜单项3','http://www.baidu.com/','images/history.gif'));
  menus.addMenuItem(new MenuItem('菜单项4','http://www.126.com/','images/alert.gif'));
  onsize();
  menus.show();
 }
 
 function onsize() {
  //alert('size');
  menus.width = 200;//document.body.clientWidth;
  menus.height = document.body.clientHeight;
  menus.show();
 }
 window.onresize = onsize;
</SCRIPT>
</body>

webgl2005
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe的OutLook模板备份
图画hadoop
08-11 128
OutLook模板备份
email 里的iframe
老尹的笔记
02-15 4414
经过几天的痛苦寻觅，终于发现N年前就有email中的iframe会成为病毒的 载体而遭封杀，才明白为什么我的mail内容总是不能正常显示。原来iframe已经被大多屏蔽了。对于web mail 服务上来说，不管用的什么技术，他们肯定扫描了信的内容才实现屏蔽的吧。干吗不老实承认呢。好象只有Gmail是主动承认会扫描信件内容的web mail 服务商。outlook express 可以通过修改安全选
python 发送邮件_这么简单？用Python自动发送邮件
weixin_39841610的博客
12-11 151
前言拒绝重复劳动，一切皆可程序化。工作中的日报、周报、工作总结等任务，都会用到邮箱。当程序出错的时候，开发人员需要将错误信息发送到指定的邮箱。其实，这样的工作都可以交给程序自动化完成，我们要做的就是静静地享受程序带来的乐趣。快乐工作，享受生活。Python的“优势”因为基于Python开发出许多优秀的第三方库，所以工作中的多数事情都可能用python来程序化，甚至，使用现存的资源可以帮助你完成从前...
js仿QQ/outlook菜单
tiandiqing的专栏
11-30 2837
模拟QQ菜单效果A:link { COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}A:visited { COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}A:hover { COLOR: #006CD9; FONT-SIZE: 12px;
OutlookBar样式的JS导航栏
编程手札
04-04 2585
最近要找JS的导航栏，在网上找了个篇也没合适的，就自己写了一个，大概一天时间就完成了，支持IE/FF/Chrome和换肤功能，如下：资源下载地址：http://download.csdn.net/source/1176732
iframe实现左侧菜单右侧页面简单示例
02-29
"iframe实现左侧菜单右侧页面简单示例"就是一个典型的双栏布局模式，常用于展示左侧导航菜单，右侧则展示对应的内容区域。这种设计模式在很多网站和管理系统中都很常见。 Iframe，全称"Inline Frame"，是HTML中的一...
使用iframe实现点击导航无刷新切换页面
10-11
这里的JavaScript函数`changeIframe`接收一个参数，即要加载的页面URL，并将其赋值给`iframe`的`src`属性，从而实现在导航栏点击时无刷新切换内容。 **三、Bootstrap导航栏的响应式设计** Bootstrap的导航栏是响应...
jQuery内嵌iframe导航菜单
06-24
本篇文章将详细讲解如何利用jQuery实现一个内嵌iframe的导航菜单，以及相关的设计与实现技巧。 一、jQuery 导航菜单基础 1. jQuery的选择器：jQuery 提供了丰富的选择器，如 ID 选择器 (#id)，类选择器 (.class) 和...
iframe异步加载实现点击左边菜单加载右边内容实例讲解
12-12
关于iframe异步加载，我们常用的大都是左边菜单栏右边是内容页面，要求我们不能左边菜单不能刷新的情况下，异步加载右边的内容页面。 话不多说，做了一个实例大致是这样的： 1、首先在你的项目中建立三个文件如： 2...
仿制outlook菜单 js
11-06
比较实用，js实现的左侧菜单导航，还适合做些小项目的后台管理的界面。
kktOutlookBar--OutlookBar样式的JS导航栏
04-04
用Javascript编写的OutlookBar控件，使用很方便和美观大方，支持换肤，内带5种风格、源码和示例，是导航栏的又一选择。
outlookbar下载及使用说明
mouxianbiao的博客
08-18 1729
outlookbar下载及使用说明 outlookbar.zip下载链接：https://download.csdn.net/download/mouxianbiao/10611706 //压缩包使用说明： //1.解压文件，点击“使用指南.html”查看指南 //2.编辑“outlook.html”，修改界面效果 //3.点击“index.html”预览效果 // ———————————...
outlook html 邮件表格边框问题
热门推荐
三分地
06-16 1万+
工作中需要定时自动发送一个邮件报表，使用 HTML、CSS 编写正文。为了减少代码量，在外部 style 中定义如下：td {border:1px solid;}这种写法在 foxmail 上显示的邮件是正常的，但在 outlook 上邮件显示没有边框，于是在每一个 td 加上 border 属性，发现边框分别出现，即每两格之间的边框都出现，非常难看。按照如下编写则会正常显示： table 有一个
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值