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


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插件制作 图片走廊 gallery
Aug 17 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
javascript实现拖放效果
Dec 16 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 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&amp;mysql(一)
2006/10/09 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
javascript实现yield的方法
2013/11/06 Javascript
初识Node.js
2014/09/03 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
详解Vue之计算属性
2020/06/20 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
python搭建微信公众平台
2016/02/09 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Python File(文件) 方法整理
2019/02/18 Python
python实现合并两个排序的链表
2019/03/03 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
python 自动识别并连接串口的实现
2021/01/19 Python
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
物流仓储实习自我鉴定
2013/09/25 职场文书
西门豹教学反思
2014/02/04 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
年终总结会议主持词
2014/03/17 职场文书
经销商订货会主持词
2014/03/27 职场文书
新教师培训方案
2014/06/08 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL