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


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 相关文章推荐
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 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的配置文件php.ini
2006/10/09 PHP
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
phpwind放自动注册方法
2006/12/02 Javascript
看了就知道什么是JSON
2007/12/09 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
利用Python开发实现简单的记事本
2016/11/15 Python
python自定义异常实例详解
2017/07/11 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
Django框架封装外部函数示例
2019/05/28 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
Java语言程序设计测试题判断题部分
2013/01/06 面试题
股票投资建议书
2014/05/19 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
采购员岗位职责
2015/02/03 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书