TaskMenu3(仿xp界面菜单)

时间:2006/5/31 0:15:26      阅读:6621     附件: TaskMenu3.0.rar (经验值:20)     下载:15

      此程序使用js和htm实现,可以方面的使用到您的网站上。界面美观漂亮,完全模仿windows xp的侧边栏,效果非常不错,有三种风格可供选择(其实可以按照自己的需求自己定义更多的风格)。先看看原版的截图:

以上三个风格是在右边选择进行切换,现在经过我自己定义把它移动左边,如下图是俺的网站一直都在使用的菜单呵:

只要点击上方的“蓝色、银色、经典”就可以切换到不同的风格,还可以根据自己的需要自定义风格呵,嘿嘿,就是爽……

 新特点:
       (1) 重新设计的数据结构,使用了更合理的双向链表,代替了旧版本的父子包含结构,更容易以后扩展。
       (2) 重新设计了控制函数接口,更方便使用者。
       (3) 通过重写css样式文件,就可以换菜单肤表,不需要刷新,并可自定义样式。
       (4) 兼容最新的firefox 浏览器。

   使用特点:

       菜单有一些比较特殊的地方,跟前两个版本不同的是,在构建TaskMenu类之后,必须调用init方法,才可以让
   菜单显示。在调用init方法之前add的条目,会立即显示,而在init后添加的或使用中动态添加的,都会以动态效果
   添加到菜单。
       菜单的动作基本分为open(伸出),close (缩回),extend (变长),shorten(变短);
       四种操作可同时加载在同一个菜单,而且同一个操作可加载在多个菜单上。 也可算上是异步操作。
       但open和close 其中响应一种操作只会停止之前操作,毕竟菜单要么打开,要么关闭。
       extend 和 shorten 同上。
       同一个菜单条目添加到不同的菜单,之后添加的是该条目的科隆版本。 如果你要返回该菜单变量建议您直角调用cloneNode函数。
            var item = new TaskMenuItem("条目");
            var menu1 = new TaskMenu("菜单");
            var menu2 = new TaskMenu("菜单");

            menu1.add(item);
            menu2.add(item); 同item被两次添加,这里实际隐式的调用的是 menu2.add(item.cloneNode ());
           这样如果您要调用 menu2.remove(item);是不会成功的。因为被添加的是科隆条目,并不是item变量,引用不一致。
       解决办法就是  调用 menu2.remove(menu2.items(0)); menu2.item(0)方法返回的就是那个被科隆的版本,
       因为它是第一条目。或者直接调用科隆方法。
            var item1 = new TaskMenuItem("条目");
            var item2 = item.cloneNode();

     

    配制:
       默认情况下,菜单已经能很好的使用了,不过,根据大家的需要,可能还是需要更改,先说下TaskMenu.js中头部
   中一些全局变量的用途: 默认配制如下 [注:文件头部中以INF打头的变量不要更改]
   var CFG_FRAME_COUNT                 = 6;
   var CFG_DOCUMENT_MARGIN             = 12;
   var CFG_MENU_SPACING                = 15;
   var CFG_MENU_WIDTH                  = 185;
   var CFG_SCROLLBAR_WIDTH             = 17;
   var CFG_TITLEBAR_HEIGHT             = 25;
   var CFG_TITLEBAR_LEFT_WIDTH         = 13;
   var CFG_TITLEBAR_RIGHT_WIDTH        = 25;
   var CFG_MENUBODY_PADDING            = 9;
   var CFG_TITLEBAR_BORDER_WIDTH       = 0;
   var CFG_MENUBODY_BORDER_WIDTH       = 1;
   var CFG_SLEEP_TIME_BEGIN            = 20;
   var CFG_SLEEP_TIME_END              = 60;
   var CFG_ALPHA_STEP = Math.ceil( 100 / (CFG_FRAME_COUNT) );
   var CFG_IS_SCROLLBAR_ENABLED        = true;
   var CFG_TITLEBAR_MIDDLE_WIDTH = CFG_MENU_WIDTH - CFG_TITLEBAR_LEFT_WIDTH - CFG_TITLEBAR_RIGHT_WIDTH;
   CFG_IS_SPECIAL_HEAD_NODE            = false

    CFG_FRAME_COUNT 变量设定菜单变动效果需要的贞数。越小越快。最小为1 (不要设定为0 哦),就没有变动的效果了。
    CFG_DOCUMENT_MARGIN 变量设定菜单的上方向和左方向离 文档边缘的空隙。
    CFG_MENU_WIDTH 用来设定菜单的宽度
    CFG_TITLEBAR_HEIGHT 用来设定菜单标题栏的高度。
    CFG_TITLEBAR_LEFT_WIDTH 标题栏实际被分为三个部分,此变量决定左边的宽度,也就是装载titlebarLeft.gif部分除非您设计了自己的样式,否则不要更改
    CFG_TITLEBAR_RIGHT_WIDTH 同上,是右边的宽度,也就是菜单状态箭头的部分。
    CFG_TITLEBAR_MIDDLE_WIDTH  标题栏中间部分宽度,这里是总长度减去两边的部分,也就是titlebarMiddle.gif部分。
    CFG_TITLEBAR_BORDER_WIDTH 标题栏的边框大小,这里被设定为0
    CFG_MENUBODY_PADDING 菜单身体的内部空隙大小
    CFG_MENUBODY_BORDER_WIDTH 菜单实体的边框大小
    CFG_SLEEP_TIME_BEGIN  起始时间间隔 不要更改
    CFG_SLEEP_TIME_END    结束时间间隔 不要更改
    CFG_ALPHA_STEP        菜单变化中,每贞透明度发生变化的值。
    CFG_IS_SPECIAL_HEAD_NODE  默认情况下,是否特殊化头菜单,建议不要更改此变量,而使用TaskMenu.setHeadMenuSpecial设定。
    CFG_IS_SCROLLBAR_ENABLED  默认情况下滚动条是否可用,建议不要更改此变量,而使用TaskMenu.setScrollbarEnabled(value)来更改。

评论
  • Re:TaskMenu3(仿xp界面菜单)  (2006/7/17 19:49:10) by 辉辉 
    好想要这东西啊!!!!
  • Re:TaskMenu3(仿xp界面菜单)  (2006/8/4 22:10:22) by 飘萍 
    这个不错,收藏起来。
  • Re:TaskMenu3(仿xp界面菜单)  (2006/8/24 0:56:53) by zwy 
    我好想要呀。不过要努力,现在分数太少了。
  • Re:TaskMenu3(仿xp界面菜单)  (2006/10/19 8:57:38) by fd 
    这个不错,收藏起来。
  • Re:TaskMenu3(仿xp界面菜单)  (2007/1/7 9:39:21) by allen 
    做得不错,能不能下来用一下
  • Re:TaskMenu3(仿xp界面菜单)  (2007/4/1 8:57:11) by 我是夜班ffff 
    不错,我喜欢
  • Re:TaskMenu3(仿xp界面菜单)  (2007/5/8 14:01:52) by enjoyjava 
    非常想要这套控件!谢谢咯!
  • Re:TaskMenu3(仿xp界面菜单)  (2007/5/11 10:40:14) by hy007 
    做得不错
  • Re:TaskMenu3(仿xp界面菜单)  (2007/12/17 16:50:34) by 周天 
    做的不错,就是得不来!
  • 用JS实现一个简单的仿xp下拉菜单[上]  (2007/12/17 16:54:07) by 周天 

    用JS实现一个简单的仿xp下拉菜单,贴出来,希望对其它人有用,有兴趣的朋友可以对快捷键功能进行扩展,目前留有接口,但未实现。

    本文来源于 WEB开发网 原文链接:http://www.cncms.com.cn/js/4546.htm
    menu.htm(菜单主文件)
    <html>
     <head>
      <title>Noteless Valley(lijun.org)程序示例</title>
      <meta name=GENERATOR content=Microsoft Visual Studio.net 7.0>
      <meta name=vs_targetSchema content=http://schemas.microsoft.com/intellisense/ie5>
      <meta http-equiv=Content-Type content=text/html; charset=gb2312>
      <link href=xp_menu.css rel=stylesheet type=text/css>
      <script language=javascript src=xp_menu.js></script>
      <script language=javascript for=document event=onselectstart>
    <!--
     return document_onselectstart()
    //-->
      </script>
      <script language=javascript for=document event=onclick>
    <!--
     return document_onclick()
    //-->
      </script>
     </head>
     <body scroll=no language=javascript onresize=return window_onresize() onload=return window_onload()>
      <script language=javascript>
    <!--
     //定义一个主菜单对象
     var mnuMain = new menu(mnuMain);   
     mnuMain.bar[0] = new menu_bar(mnuMainNL,,无名谷,,Noteless Valley,,0,mnuNL);
     mnuMain.bar[1] = new menu_bar(mnuMainSiteAdmin,,网站管理,,网站管理,,0,mnuSiteAdmin);
     mnuMain.bar[2] = new menu_bar(mnuMainSystem,,系统管理,,系统管理,,0,mnuSystem);
     mnuMain.bar[3] = new menu_bar(mnuMainShow,,演示菜单,,Menu Show,,0,mnuShow);
     popMainMenu(mnuMain,0,0,100%,27);    //激活主菜单,通过参数确定主菜单的位置
     
     var mnuNL = new menu(mnuNL);
     mnuNL.bar[0] = new menu_bar(mnuHomePage,,首页,,HomePage,,1,http://lijun.org);
     mnuNL.bar[1] = new menu_bar(mnuDesign,,网页设计,,Design,,1,http://lijun.org/article.asp?topic=1);
     mnuNL.bar[2] = new menu_bar(mnuProgram,,网络编程,,Program,,1,http://lijun.org/article.asp?topic=2);
     mnuNL.bar[3] = new menu_bar(mnuOthers,,其它文章,,Others,,1,http://lijun.org/article.asp?topic=3);
     popSubMenu(mnuNL);
     
     var mnuSiteAdmin = new menu(mnuSiteAdmin)
     mnuSiteAdmin.bar[0] = new menu_bar(mnuAddressUpdate,,访问地区更新,,访问地区更新,,1,AddressUpdate.asp);
     popSubMenu(mnuSiteAdmin);
     
     var mnuSystem = new menu(mnuSystem);
     mnuSystem.bar[0] = new menu_bar(mnuSysUser,,用户管理,,用户管理,,1,userAdmin.asp);
     mnuSystem.bar[1] = new menu_bar(mnuSysAuthority,,权限管理,,权限管理,,1,authority.asp);
     mnuSystem.bar[2] = new menu_bar(\-,,,,,,,);
     mnuSystem.bar[3] = new menu_bar(mnuSysPwdChange,,口令修改,,口令修改,,1,chgpwd.asp);
     mnuSystem.bar[4] = new menu_bar(\-,,,,,,,);
     mnuSystem.bar[5] = new menu_bar(mnuSysHelp,,帮助,,帮助,,1,help.asp);
     mnuSystem.bar[6] = new menu_bar(mnuSysAbout,,关于本系统,,关于本系统,,1,about.asp);
     mnuSystem.bar[7] = new menu_bar(\-,,,,,,,);
     mnuSystem.bar[8] = new menu_bar(mnuSysExit,,退出系统,,退出本系统,,1,quit.asp);
     popSubMenu(mnuSystem);
     
     var mnuShow = new menu(mnuShow);
     mnuShow.bar[0] = new menu_bar(mnuShow1,,演示菜单一,,Menu Show 1,,1,menushow1.asp);
     mnuShow.bar[1] = new menu_bar(mnuShow2,,演示菜单二,,Menu Show 2,,0,mnuShow_2);
     mnuShow.bar[2] = new menu_bar(mnuShow3,,演示菜单三,,Menu Show 3,,1,menushow3.asp);
     mnuShow.bar[3] = new menu_bar(\-,,,,,,,);
     mnuShow.bar[4] = new menu_bar(mnuShow4,,演示菜单四,,Menu Show 4,,1,menushow4.asp);
     mnuShow.bar[5] = new menu_bar(mnuShow5,,演示菜单五,,Menu Show 5,,0,mnuShow_2);
     popSubMenu(mnuShow);
     
     var mnuShow_2 = new menu(mnuShow_2);
     mnuShow_2.bar[0] = new menu_bar(mnuShow21,,演示菜单二一,,Menu Show 2.1,,1,menushow21.asp);
     mnuShow_2.bar[1] = new menu_bar(mnuShow22,,演示菜单二二,,Menu Show 2.2,,0,mnuShow_22);
     mnuShow_2.bar[2] = new menu_bar(mnuShow23,,演示菜单二三,,Menu Show 2.3,,1,menushow23.asp);
     mnuShow_2.bar[3] = new menu_bar(mnuShow24,,演示菜单二四,,Menu Show 2.4,,0,mnuShow_22);
     mnuShow_2.bar[4] = new menu_bar(mnuShow25,,演示菜单二五,,Menu Show 2.5,,1,menushow25.asp);
     popSubMenu(mnuShow_2);
     
     var mnuShow_22 = new menu(mnuShow_22);
     mnuShow_22.bar[0] = new menu_bar(mnuShow221,,演示菜单二二一,,Menu Show 2.2.1,,1,menushow221.asp);
     mnuShow_22.bar[1] = new menu_bar(mnuShow222,,演示菜单二二二,,Menu Show 2.2.2,,1,menushow222.asp);
     mnuShow_22.bar[2] = new menu_bar(mnuShow223,,演示菜单二二三,,Menu Show 2.2.3,,1,menushow223.asp);
     popSubMenu(mnuShow_22);
    //-->
      </script>
      <table border=0 cellpadding=0 cellspacing=0><tr><td height=27>此部分已经被顶部菜单条覆盖</td></tr></table>
      <p id=lblOutput>信息提示区域</p>
     </body>
    </html>
     
  • 用JS实现一个简单的仿xp下拉菜单[中]   (2007/12/17 16:57:46) by 鍛ㄥぉ 

    xp_menu.css(样式表)
    body {
     FONT-SIZE: 13px;
     MARGIN: 0px;
     SCROLLBAR-SHADOW-COLOR: silver;
     SCROLLBAR-3DLIGHT-COLOR: silver;
     LINE-HEIGHT: 20px;
     FONT-FAMILY: Verdana, 宋体;
     SCROLLBAR-DARKSHADOW-COLOR: silver;
     BACKGROUND-COLOR: #ff99cc;
     border: none;
    }

    DIV.MainMenuBG
    {
     border-right: teal 1px solid;
     font-size: 14px;
     border-left: #ffffff 1px solid;
     cursor: default;
     color: #000000;
     border-bottom: teal 1px solid;
     font-family: Verdana, 宋体;
     position: absolute;
     background-color: #d6d3ce;
    }
    DIV.MainMenu
    {
     border-right: #d6d3ce 1px solid;
     padding-right: 8px;
     border-top: #d6d3ce 1px solid;
     padding-left: 8px;
     padding-bottom: 1px;
     border-left: #d6d3ce 1px solid;
     cursor: default;
     padding-top: 1px;
     border-bottom: #d6d3ce 1px solid;
     position: absolute;
     background-color: #d6d3ce;
    }
    DIV.MainMenuOver
    {
     border-right: #08246b 1px solid;
     padding-right: 8px;
     border-top: #08246b 1px solid;
     padding-left: 8px;
     padding-bottom: 1px;
     border-left: #08246b 1px solid;
     cursor: default;
     padding-top: 1px;
     border-bottom: #08246b 1px solid;
     position: absolute;
     background-color: #b5bed6;
    }
    DIV.MainMenuClick
    {
     border-right: #636563 1px solid;
     padding-right: 8px;
     border-top: #636563 1px solid;
     padding-left: 8px;
     padding-bottom: 1px;
     border-left: #636563 1px solid;
     cursor: default;
     padding-top: 1px;
     border-bottom: #636563 1px solid;
     position: absolute;
     background-color: #dedbd6;
    }
    DIV.SubMenuBG
    {
     border-right: #636563 1px solid;
     border-top: #636563 1px solid;
     font-size: 14px;
     visibility: hidden;
     border-left: #636563 1px solid;
     color: #000000;
     border-bottom: #636563 1px solid;
     font-family: Verdana, 宋体;
     position: absolute;
     background-color: #fffbf7;
    }
    DIV.SubMenu
    {
     cursor: default;
     position: absolute;
    }
    DIV.SubMenuOver
    {
     cursor: default;
     position: absolute;
    }
    TD.ico
    {
     border-top: #dedbd6 1px solid;
     border-left: #dedbd6 1px solid;
     border-bottom: #dedbd6 1px solid;
     background-color: #dedbd6;
    }
    TD.icoOver
    {
     border-top: #08246b 1px solid;
     border-left: #08246b 1px solid;
     border-bottom: #08246b 1px solid;
     background-color: #b5bed6;
     border-right-width: 1px;
     border-right-color: #08246b;
    }
    TD.text
    {
     padding-right: 2px;
     border-top: #fffbf7 1px solid;
     padding-left: 5px;
     border-bottom: #fffbf7 1px solid;
     background-color: #fffbf7;
    }
    TD.textOver
    {
     padding-right: 2px;
     border-top: #08246b 1px solid;
     padding-left: 5px;
     border-bottom: #08246b 1px solid;
     background-color: #b5bed6;
    }
    TD.skey
    {
     padding-right: 2px;
     border-top: #fffbf7 1px solid;
     padding-left: 2px;
     border-bottom: #fffbf7 1px solid;
     background-color: #fffbf7;
    }
    TD.skeyOver
    {
     padding-right: 2px;
     border-top: #08246b 1px solid;
     padding-left: 2px;
     border-bottom: #08246b 1px solid;
     background-color: #b5bed6;
    }
    TD.sub
    {
     border-right: #fffbf7 1px solid;
     border-top: #fffbf7 1px solid;
     border-bottom: #fffbf7 1px solid;
     background-color: #fffbf7;
    }
    TD.subOver
    {
     border-right: #08246b 1px solid;
     border-top: #08246b 1px solid;
     border-bottom: #08246b 1px solid;
     background-color: #b5bed6;
    }
    DIV.SubMenu TD
    {
     font-size: 14px;
     padding-top: 2px;
    }

  • Re:TaskMenu3(仿xp界面菜单)  (2007/12/17 17:01:47) by 閸涖劌銇?Url= 
       xp_menu.css(样式表)
    body {
     FONT-SIZE: 13px;
     MARGIN: 0px;
     SCROLLBAR-SHADOW-COLOR: silver;
     SCROLLBAR-3DLIGHT-COLOR: silver;
     LINE-HEIGHT: 20px;
     FONT-FAMILY: Verdana, 宋体;
     SCROLLBAR-DARKSHADOW-COLOR: silver;
     BACKGROUND-COLOR: #ff99cc;
     border: none;
    }
    DIV.MainMenuBG
    {
     border-right: teal 1px solid;
     font-size: 14px;
     border-left: #ffffff 1px solid;
     cursor: default;
     color: #000000;
     border-bottom: teal 1px solid;
     font-family: Verdana, 宋体;
     position: absolute;
     background-color: #d6d3ce;
    }
    DIV.MainMenu
    {
     border-right: #d6d3ce 1px solid;
     padding-right: 8px;
     border-top: #d6d3ce 1px solid;
     padding-left: 8px;
     padding-bottom: 1px;
     border-left: #d6d3ce 1px solid;
     cursor: default;
     padding-top: 1px;
     border-bottom: #d6d3ce 1px solid;
     position: absolute;
     background-color: #d6d3ce;
    }
    DIV.MainMenuOver
    {
     border-right: #08246b 1px solid;
     padding-right: 8px;
     border-top: #08246b 1px solid;
     padding-left: 8px;
     padding-bottom: 1px;
     border-left: #08246b 1px solid;
     cursor: default;
     padding-top: 1px;
     border-bottom: #08246b 1px solid;
     position: absolute;
     background-color: #b5bed6;
    }
    DIV.MainMenuClick
    {
     border-right: #636563 1px solid;
     padding-right: 8px;
     border-top: #636563 1px solid;
     padding-left: 8px;
     padding-bottom: 1px;
     border-left: #636563 1px solid;
     cursor: default;
     padding-top: 1px;
     border-bottom: #636563 1px solid;
     position: absolute;
     background-color: #dedbd6;
    }
    DIV.SubMenuBG
    {
     border-right: #636563 1px solid;
     border-top: #636563 1px solid;
     font-size: 14px;
     visibility: hidden;
     border-left: #636563 1px solid;
     color: #000000;
     border-bottom: #636563 1px solid;
     font-family: Verdana, 宋体;
     position: absolute;
     background-color: #fffbf7;
    }
    DIV.SubMenu
    {
     cursor: default;
     position: absolute;
    }
    DIV.SubMenuOver
    {
     cursor: default;
     position: absolute;
    }
    TD.ico
    {
     border-top: #dedbd6 1px solid;
     border-left: #dedbd6 1px solid;
     border-bottom: #dedbd6 1px solid;
     background-color: #dedbd6;
    }
    TD.icoOver
    {
     border-top: #08246b 1px solid;
     border-left: #08246b 1px solid;
     border-bottom: #08246b 1px solid;
     background-color: #b5bed6;
     border-right-width: 1px;
     border-right-color: #08246b;
    }
    TD.text
    {
     padding-right: 2px;
     border-top: #fffbf7 1px solid;
     padding-left: 5px;
     border-bottom: #fffbf7 1px solid;
     background-color: #fffbf7;
    }
    TD.textOver
    {
     padding-right: 2px;
     border-top: #08246b 1px solid;
     padding-left: 5px;
     border-bottom: #08246b 1px solid;
     background-color: #b5bed6;
    }
    TD.skey
    {
     padding-right: 2px;
     border-top: #fffbf7 1px solid;
     padding-left: 2px;
     border-bottom: #fffbf7 1px solid;
     background-color: #fffbf7;
    }
    TD.skeyOver
    {
     padding-right: 2px;
     border-top: #08246b 1px solid;
     padding-left: 2px;
     border-bottom: #08246b 1px solid;
     background-color: #b5bed6;
    }
    TD.sub
    {
     border-right: #fffbf7 1px solid;
     border-top: #fffbf7 1px solid;
     border-bottom: #fffbf7 1px solid;
     background-color: #fffbf7;
    }
    TD.subOver
    {
     border-right: #08246b 1px solid;
     border-top: #08246b 1px solid;
     border-bottom: #08246b 1px solid;
     background-color: #b5bed6;
    }
    DIV.SubMenu TD
    {
     font-size: 14px;
     padding-top: 2px;
    }
     
  • Re:TaskMenu3(仿xp界面菜单)  (2007/12/17 17:35:35) by 闁告稏鍔岄妵?Url= 
    var show = true;
    var hide = false;
    //修改菜单的上下箭头符号
    function my_on(head,body)
    {
    	head.className="tit_on";
    }
    function my_off(head,body)
    {
    	head.className="tit";
    }
    //添加菜单	
    window.onload=function()
    {
    	m1 =new Menu("menu1",'menu1_child','dtu','100',show,my_on,my_off);
    	m1.init();
    	m2 =new Menu("menu2",'menu2_child','dtu','100',hide,my_on,my_off);
    	m2.init();
    	m3 =new Menu("menu3",'menu3_child','dtu','100',hide,my_on,my_off);
    	m3.init();
    	m4 =new Menu("menu4",'menu4_child','dtu','100',hide,my_on,my_off);
    	m4.init();
    	m5 =new Menu("menu5",'menu5_child','dtu','100',hide,my_on,my_off);
    	m5.init();
    	m6 =new Menu("menu6",'menu6_child','dtu','100',hide,my_on,my_off);
    	m6.init();
    	m7 =new Menu("menu7",'menu7_child','dtu','100',show,my_on,my_off);
    	m7.init();
    	var bar = new navbar('dtu',10,60);
    	bar.add('bar_1','bar_cld_1');
    	bar.add('bar_2','bar_cld_2');
    	bar.add('bar_3','bar_cld_3');
    	bar.init();
    }
    
  • Re:TaskMenu3(仿xp界面菜单)  (2008/1/17 16:18:19) by ZhouFuqiang 
    不偷一下都不好意思,ding.........
  • Re:TaskMenu3(仿xp界面菜单)  (2008/5/14 17:28:31) by 钱飞 
    好东西
  • Re:TaskMenu3(仿xp界面菜单)  (2009/3/30 16:51:35) by aghlqp 
    好东西,值得收藏
  • Re:TaskMenu3(仿xp界面菜单)  (2011/5/24 10:43:08) by 黄芪 

    可以共享吗?445166589@qq.com

     

标 题:
 
姓 名:
 
主 页:

验证码:

评论:
 

Because of the cache,you may see your comments several minutes later.