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


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 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
vue 中swiper的使用教程
May 22 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
js中关于Blob对象的介绍与使用
Nov 29 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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 MYSQL中插入当前时间
2008/04/06 PHP
php smarty的预保留变量总结
2008/12/04 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
php生成动态验证码gif图片
2015/10/19 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
php数组和链表的区别总结
2019/09/20 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
对python条件表达式的四种实现方法小结
2019/01/30 Python
分享一个python的aes加密代码
2020/12/22 Python
详解python的变量缓存机制
2021/01/24 Python
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
元旦寄语大全
2014/04/10 职场文书
自主招生教师推荐信
2014/05/10 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python