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


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 相关文章推荐
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
详解Node.js中的Async和Await函数
Feb 22 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
ElementUI之Message功能拓展详解
Oct 18 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
smarty实现多级分类的方法
2014/12/05 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
Python运算符重载用法实例分析
2015/06/01 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
django如何自己创建一个中间件
2019/07/24 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
高三生物教学反思
2014/01/25 职场文书
就业表自我评价分享
2014/02/06 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
大专学生求职信
2014/07/04 职场文书
总结会主持词
2015/07/02 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis