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


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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
JS实现移动端触屏拖拽功能
Jul 31 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
JS求解两数之和算法详解
Apr 28 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生成WAP页面
2006/10/09 PHP
php mysql数据库操作类
2008/06/04 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python多进程fork()函数详解
2019/02/22 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
入党推优材料
2014/06/02 职场文书
主要负责人任命书
2014/06/06 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
新员工入职感想
2015/08/07 职场文书
学校教代会开幕词
2016/03/04 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
Log4j.properties配置及其使用
2021/08/02 Java/Android