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


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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
prototype Element学习笔记(篇一)
Oct 26 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
JS中substring与substr的用法
Nov 16 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 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的加密方式及原理
2012/06/14 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
php源码的使用方法讲解
2019/09/26 PHP
js 匿名调用实现代码
2009/06/19 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python列表切片常用操作实例解析
2020/03/10 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
企业厂长岗位职责
2013/12/17 职场文书
学校办公室主任职责
2013/12/27 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
2015年暑期见闻
2015/07/14 职场文书
电工生产实习心得体会
2016/01/22 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书