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

太激动了...竟然还发现有备份文件
<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>

在线演示http://www.jb51.net/jslib/EXTJS/code.htm
打包下载
仿163
仿126

(0)

相关推荐

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

    太激动了...竟然还发现有备份文件<script type="text/javascript"> window.onload=function(){ function $(id){return document.getElementById(id)} var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器 var tags=menu.getElementsByTagNa

  • javascript 代码简单的管理菜单

    我们_www.jb51.net_简单的管理菜单 body{font-size:12px;} ul,li,h2{margin:0;padding:0;} ul{list-style:none;} #top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00} #top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;t

  • shopex中集成的站长统计功能的代码简单分析

    复制代码 代码如下: <?php //我们的域名,这里可以不唯一的 $domain = 'localhost'; //这个应该是CNZZ授权给shopex的加密密钥,如果错了就不能快捷申请账号 $encodestr = 'A34dfwfF'; //这个就是CNZZ授权给shopex的快捷申请账号的URL地址 $url = 'http://wss.cnzz.com/user/companion/shopex.php?domain='.$domain.'&key='.md5($domain.$e

  • Avalonjs 实现简单购物车功能(实例代码)

     先给大家简单介绍下avalon概念 avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前就预言,MVVM是前端的终极解决方案.我之前在盛大无线做盛大通行证就深有体会,一个业务逻辑对应十来个不同的界面,分层架构是必不可少的.因此双向绑定作为解药,结合很早就流行的MVC框架,衍生出MVVM这神器. 因为最近有在做购物车,然后我们是用avalon来实现一

  • 上手简单,功能强大的Python爬虫框架——feapder

    简介 feapder 是一款上手简单,功能强大的Python爬虫框架,使用方式类似scrapy,方便由scrapy框架切换过来,框架内置3种爬虫: AirSpider爬虫比较轻量,学习成本低.面对一些数据量较少,无需断点续爬,无需分布式采集的需求,可采用此爬虫. Spider是一款基于redis的分布式爬虫,适用于海量数据采集,支持断点续爬.爬虫报警.数据自动入库等功能 BatchSpider是一款分布式批次爬虫,对于需要周期性采集的数据,优先考虑使用本爬虫. feapder除了支持断点续爬.数

  • JavaScript实现简单的图片切换功能(实例代码)

    代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 300px; margin: 50px auto; padding: 20p

  • 微信小程序之导航滑块视图容器功能的实现代码(简单两步)

    先看效果图: 这个滑块除了可以点击上方的导航,还可以左右切换页面,随之导航也跟这切换. 实现步骤: 编写滑块视图代码 编写逻辑代码 wxml: <view class="content"> <view class="title"> <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="sw

  • Java语言实现简单的酒店前台管理小功能(实例代码)

    笔者是一名刚上路的小萌新,有什么问题希望大家可以指正! 以下为题目: 为某个酒店编写程序:酒店管理系统,模拟订房.退房.打印所有房间状态等功能. 1.该系统的用户是:酒店前台. 2.酒店使用一个二维数组来模拟."Room[][] rooms;" 3.酒店中的每一个房间应该是一个java对象:Room 4.每一个房间Room应该有:房间编号.房间类型.房间是否空闲. 5.系统应该对外提供的功能: 可以预定房间:用户输入房间编号,订房. 可以退房:用户输入房间编号,退房. 可以查看所有房间

  • 打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)

    最近做项目,我负责做网页前端,客户需要利用触摸屏进行操作,不外接鼠标键盘,但要求能录入文字,包括数字,英文,中文.思考了一下,决定用JS实现虚拟键盘. 首先上网搜索了一下JS虚拟键盘,在经过仔细筛选后,相中了VirtualKeyboard,一款功能强大的JS虚拟键盘插件. 先简单介绍一下VirtualKeyboard,它内置了100多种键盘布局和200多种输入法,9套可选皮肤方案,而且支持自建输入法,功能相当强大. 先附上下载地址,目前的最新版本3.94:http://www.coralloso

  • Android组合控件实现功能强大的自定义控件

    通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件 上文说过了如何继承现有控件来自定义控件:<Android继承现有控件拓展实现自定义控件textView>,这节我们来讨论第二个议题.怎么将控件组合来实现一个功能强大的自定义控件. 先看看创建组合控件的好处吧,创建组合控件能够很好的创建具有组合功能的控件集合.那我们一般又是怎么做的了,一般我们来继承一个合适的ViewG

随机推荐