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


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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
jqTransform美化表单
Oct 10 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
jquery自定义组件实例详解
Dec 31 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
如何使用Strace调试工具
2013/06/03 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
python求解汉诺塔游戏
2020/07/09 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
西门豹教学反思
2014/02/04 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
转变工作作风心得体会
2016/01/23 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android