发一个仿QQ菜单的JS

原创 2006年05月22日 13:09:00

代码:

var bar_open = false;
var active_bar = null;
var timer = null;
var hasShow = true;

function IsSpace(strMain){
 var strComp=strMain;
 try{
  if (strComp==" " || strComp=="" || strComp==" " || strComp==null || strComp=="null" || strComp.length==0 || typeof strMain == "undefined" || strMain == "undefined" ) {
   return true;
  }else{
   return false;
  }
 }catch(e){return false; }
}
function Bar_Click(obj)
{
    var bar = document.getElementById("first_bar");
    if (bar==null || obj==null) return;
    bar = bar.nextSibling;
    while (bar)
    {
        if (bar.extend!="MenuBar") bar.style.display="none";
        bar = bar.nextSibling;
    }   
    if(active_bar==obj){
     if(hasShow){
      last_bar.style.display='none';
      obj.nextSibling.style.display='block';      
      hasShow=false;      
     }else{
      obj.nextSibling.style.display='none';
      last_bar.style.display='block';
      hasShow=true;
      scroll_btn_up.style.display="none";
         scroll_btn_dn.style.display="none";
     }
    }else{
     last_bar.style.display='none';
     obj.nextSibling.style.display='block';
      hasShow=false;
 }
    active_bar = obj;   
}

function Item_Click(obj){
 
    if (obj==null) return;
    if(obj.target!=null){
     window.open(obj.href,obj.target,"");
     return;
    }
     mainfrm = document.getElementById("main");
     if(mainfrm==null){
      return;
     }else{
     mainfrm.src = obj.href;
    }
   
}

function Item_MouseDown(obj)
{
    obj.style.borderWidth=1;
    obj.style.borderTopColor="#666666";
    obj.style.borderBottomColor="#FFFFFF";
    obj.style.borderLeftColor="#666666";
    obj.style.borderRightColor="#FFFFFF";
}

function Item_MouseUp(obj)
{
    Item_MouseOver(obj);
}

function Item_MouseOver(obj)
{
    if (obj==null) return;
    obj.style.borderWidth=1;
    obj.style.borderTopColor="#FFFFFF";
    obj.style.borderBottomColor="#666666";
    obj.style.borderLeftColor="#FFFFFF";
    obj.style.borderRightColor="#666666";
}

function Item_MouseOut(obj)
{
    if (obj==null) return;
    obj.style.borderWidth=0;
}

function ScrollButton_MoveTo(obj)
{
    var scroll_btn_up = document.getElementById("scroll_btn_up");
    var scroll_btn_dn = document.getElementById("scroll_btn_dn");
    if (obj==null || scroll_btn_up==null || scroll_btn_dn==null) return;
    scroll_btn_up.style.pixelLeft = obj.offsetParent.offsetWidth-30;//scroll_btn_up.offsetWidth;
    scroll_btn_up.style.pixelTop = obj.offsetTop+19;//scroll_btn_up.offsetHeight+6;
    scroll_btn_dn.style.pixelLeft = obj.offsetParent.offsetWidth-30;//scroll_btn_up.offsetWidth;
    scroll_btn_dn.style.pixelTop = obj.offsetTop+obj.offsetHeight-19;
    var client = obj.children[0].children[0];
    if (client.offsetHeight==client.children[0].offsetHeight)
    {
        scroll_btn_up.style.display="none";
        scroll_btn_dn.style.display="none";
    }
    else
    {
        if (client.scrollTop<=0)
            scroll_btn_up.style.display="none";
        else
            scroll_btn_up.style.display="block";
        if (client.offsetHeight+client.scrollTop>=client.children[0].offsetHeight)
            scroll_btn_dn.style.display="none";
        else
            scroll_btn_dn.style.display="block";
    }
}

function setScrollBtn() {if (active_bar) ScrollButton_MoveTo(active_bar.nextSibling);}

function scrollStart(step)
{
    if (active_bar==null) return;
    var obj = active_bar.nextSibling.children[0].children[0];
    if (obj==null) return;
    obj.scrollTop+=step;
    if (obj.scrollTop>0 && obj.scrollTop+obj.offsetHeight<obj.children[0].offsetHeight)
        timer = setTimeout("scrollStart("+step+")", 100);
    else
        setScrollBtn();
}

function scrollStop()
{
    clearTimeout(timer);
}

function addBar(caption,background)

 if (bar_open) barEnd(); 
    bar_open = true;
    var _background="images/css/default/left.gif";
    if(IsSpace(background)==false){
     _background = "images/css/default/left.gif";
    } 
    document.write("<tr onclick=/"Bar_Click(this)/" height=19 extend=/"MenuBar/" style=/"cursor: hand/">/n"
                 + " <td valign=middle align=center><table width=/"115/" height=/"26/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/" background=/""+_background+"/">/n"    
                 + "<tr><td align=/"center/" class=/"leftfont/">"+caption+"</td></tr></table></td>"          
                 + "</tr><tr style=/"display:none/"><td valign=top align=center>/n"
                 + " <div style='height:100%;width:88%;overflow:hidden;' onresize='setScrollBtn();';>"
                 + "<table width=88% border=0 align=center valign=top>");
}

function barEnd()
{
    document.write("</table></div></td></tr>/n");
    bar_open = false;
}

function addItem(caption, href,target,bgImage)
{
    var _target="_self";
    if (caption==null || href==null) return;
    if(target!=null) _target=target;
    var _bgImage = "";
    if(IsSpace(bgImage)==false) _bgImage = " background=/"/image/menu/"+bgImage+"/" ";
    document.write("<tr height=20><td align=center valign=middle onmousedown=/"Item_MouseDown(this)/" onmouseup=/"Item_MouseUp(this)/" onmouseenter=/"Item_MouseOver(this)/" onmouseout=/"Item_MouseOut(this)/" onclick=/"Item_Click(this)/" target=/""+_target+"/" href=/""+href+"/" style=/"border:0 solid; BORDER-LEFT-COLOR: #FFFFF; BORDER-BOTTOM-COLOR: #666666; BORDER-TOP-COLOR: #FFFFF; BORDER-RIGHT-COLOR: #666666;cursor: hand/" "+_bgImage+">"+caption+"</td></tr>/n");
}

function showBar(barid)
{
    var bar = document.getElementById("first_bar");
    if (bar==null) return;
 for(var bi=1;bi<barid;bi++)
 {
    bar = bar.nextSibling;
 bar = bar.nextSibling;
 }
 while (bar && bar.extend!="MenuBar") bar = bar.nextSibling;
    if (bar.extend=="MenuBar") Bar_Click(bar);
}

function showOutlookBar()
{
 
    document.write("<table width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center valign=top id=tab1>/n"
                 + "<tr height=0 style=/"display:none/" id=/"first_bar/"><td></td></tr>/n");
 showItems();
 if (bar_open) barEnd();
    document.write("<tr style=/"display:none/" id=/"last_bar/"><td colspan=3 valign=top>/n"
       + "<div style='height:100%;width:100%;overflow:hidden;'>/n"
       + "<table width=100% border=0 align=center valign=top><tr>/n"
       + "<td></td></tr></table></div></tr>");
    document.write("</table>/n"
                 + "<input id=/"scroll_btn_up/" type=image src=/"images/css/default/up.gif/" style='z-index:3;position:absolute;width:19px;height:19px;left:0;top:0;display:none;' onmousedown='scrollStart(-20);' onmouseup='scrollStop();' onclick='return false;'>/n"
                 + "<input id=/"scroll_btn_dn/" type=image src=/"images/css/default/down.gif/" style='z-index:3;position:absolute;width:19px;height:19px;left:0;top:0;display:none;' onmousedown='scrollStart(20);' onmouseup='scrollStop();' onclick='return false;'>/n");
  showBar(1);
}

把上面的另存为qqmenu.js

使用方法,

1.引入qqmenu.js

2.动态增加菜单并显示代码:

<SCRIPT language="Javascript">
 function showItems(){
 addBar('菜单一');
 addItem('子菜单','要打开的页面',打开位置')
 addItem('子菜单','要打开的页面',打开位置')
 addItem('子菜单','要打开的页面',打开位置')
 addItem('子菜单','要打开的页面',打开位置') 
 addBar('菜单二');
 addItem('子菜单','要打开的页面',打开位置')
 addItem('子菜单','要打开的页面',打开位置')
 addItem('子菜单','要打开的页面',打开位置')
 addItem('子菜单','要打开的页面',打开位置') 
 }
showOutlookBar();
</SCRIPT>

相关文章推荐

CSS+JS 仿 QQ 切换 菜单

  • 2010年05月29日 09:54
  • 2KB
  • 下载

ym——Android仿QQ5.0侧滑菜单ResideMenu源码分析

原创博客地址:点击传送 AndroidResideMenu github:https://github.com/SpecialCyCi/AndroidResideMenu  csdn:http:/...

js 特效 html 特效 QQ菜单生成器

  • 2011年06月13日 12:34
  • 38KB
  • 下载

仿手机QQ下拉菜单框架(FFDropDownMenu) -- 基本使用

最近写了这个框架: FFDropDownMenu,类似手机QQ下拉菜单。 github地址: https://github.com/chenfanfang/FFDropDownMenu 更多的使...

js 实现 类似QQ的菜单

  • 2010年03月30日 14:40
  • 5KB
  • 下载

安卓SlideMenu 仿QQ 主页侧滑菜单

先上图 仿qq 5.0Activity 代码package custom.community.com.mydemo;import android.os.Build; import android.o...

一个js树形菜单

  • 2013年04月18日 16:29
  • 13KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:发一个仿QQ菜单的JS
举报原因:
原因补充:

(最多只允许输入30个字)