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


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 相关文章推荐
突发奇想的一个jquery插件
Nov 19 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
jquery插件实现图片悬浮
Apr 16 jQuery
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在Web开发领域的优势
2006/10/09 PHP
php a simple smtp class
2007/11/26 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Django小白教程之Django用户注册与登录
2016/04/22 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
教师求职信范文分享
2013/12/27 职场文书
关于期中考试的反思
2014/02/02 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
人力资源主管职责范本
2014/03/05 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android