非常不错的功能强大代码简单的管理菜单美化版


Posted in Javascript onJuly 09, 2008

太激动了...竟然还发现有备份文件
<script type="text/javascript">
window.onload=function(){
function $(id){return document.getElementById(id)}
var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器
var tags=menu.getElementsByTagName("li");//顶部菜单
var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单
var j;
//点击左侧菜单增加新标签
for(i=0;i<ck.length;i++){
ck[i].onclick=function(){
$("welcome").style.display="none"//欢迎内容隐藏
clearMenu();
this.style.background='url(images/tabbg02.gif)'
//循环取得当前索引
for(j=0;j<8;j++){
if(this==ck[j]){
if($("p"+j)==null){
openNew(j,this.innerHTML);//设置标签显示文字
 }
clearStyle();
$("p"+j).style.background='url(images/tabbg1.gif)';
clearContent();
$("c"+j).style.display="block";
   }
 }
return false;
  }
 }
//增加或删除标签
function openNew(id,name){
var tagMenu=document.createElement("li");
tagMenu.id="p"+id;
tagMenu.innerHTML=name+"  "+"<img src='images/off.gif' style='vertical-align:middle'/>";
//标签点击事件
tagMenu.onclick=function(evt){
clearMenu();
ck[id].style.background='url(images/tabbg02.gif)'
clearStyle();
tagMenu.style.background='url(images/tabbg1.gif)';
clearContent();
$("c"+id).style.display="block";
}
//标签内关闭图片点击事件
tagMenu.getElementsByTagName("img")[0].onclick=function(evt){
evt=(evt)?evt:((window.event)?window.event:null);
if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为;
this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签
var color=tagMenu.style.backgroundColor;
//设置如果关闭一个标签时,让最后一个标签得到焦点
if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释
if(tags.length-1>=0){
clearStyle();
tags[tags.length-1].style.background='url(images/tabbg1.gif)';
clearContent();
var cc=tags[tags.length-1].id.split("p");
$("c"+cc[1]).style.display="block";
clearMenu();
ck[cc[1]].style.background='url(images/tabbg1.gif)';
 }
else{
clearContent();
clearMenu();
$("welcome").style.display="block"
   }
  }
}
menu.appendChild(tagMenu);
}
//清除菜单样式
function clearMenu(){
for(i=0;i<ck.length;i++){
ck[i].style.background='url(images/tabbg01.gif)';
 }
}
//清除标签样式
function clearStyle(){
for(i=0;i<tags.length;i++){
menu.getElementsByTagName("li")[i].style.background='url(images/tabbg2.gif)';
  }
}
//清除内容
function clearContent(){
for(i=0;i<7;i++){
$("c"+i).style.display="none";
 }
}
}
</script>
非常不错的功能强大代码简单的管理菜单美化版
在线演示https://3water.com/jslib/EXTJS/code.htm
打包下载
仿163
仿126

Javascript 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
斜45度寻路实现函数
Aug 20 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
用原生js做单页应用
Jan 17 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
使用vue for时为什么要key【推荐】
Jul 11 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
javascript jQuery $.post $.ajax用法
Jul 09 #Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 #Javascript
SWFObject Flash js调用类
Jul 08 #Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 #Javascript
图片自动缩小 点击放大
Jul 07 #Javascript
超级退弹代码
Jul 07 #Javascript
Javascript入门学习资料收集整理篇
Jul 06 #Javascript
You might like
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php判断linux下程序问题实例
2015/07/09 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
浅谈js闭包理解
2019/04/01 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python随机数分布random测试
2018/08/27 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
就业自我评价
2014/02/04 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
委托书如何写
2014/08/30 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
2015年行政人事工作总结
2015/05/21 职场文书