发一个仿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>

JavaScript做的QQ菜单-非常实用

最近比较忙,好久都没更新博客了,今天晚上特热,上网闲看。无意间进入这个网站 http://www.72b.net/ 发现它的QQ菜单很实用。花了点时间把它“抠”了出来,效果如下:本着开源共享的原则,现...
  • qjyong
  • qjyong
  • 2008年06月21日 22:56
  • 2445

仿QQ写说说效果的实现

今天同学问了关于仿QQ写说说界面的实现,个人感觉就是如同评论,回复的那种效果,按捺不住,就仿写了一回,大家不要见笑啊首先,我们需要根据需求进行分析这里我们看见刚进入的时候不显示键盘跟被键盘顶起的布局,...
  • qq_16131393
  • qq_16131393
  • 2016年03月20日 00:54
  • 2912

Android仿QQ ios dialog,仿QQ退出向上菜单

Android仿QQ ios dialog,仿QQ退出向上菜单 EasyDialog两种模式 仿QQ退出向上菜单,自定义向上菜单              github地址:点击打开链接 使...
  • ashuai2010
  • ashuai2010
  • 2016年03月14日 22:34
  • 1089

android批量上传图片(模仿QQ空间和微信发表说说)

android批量上传图片(模仿QQ空间和微信发表说说) **请大家关注下我的微信公众号:哦哦猿 QQ群:516054879** 首先我们来看下效果 这个是启动方法:HttpPostUt...
  • zhenliang5553
  • zhenliang5553
  • 2016年03月30日 13:56
  • 7956

一个仿QQ导航菜单,非常实用!

仿QQ导航菜单.titleStyle{background-color:#008800;color:#ffffff;border-top:1px solid #FFFFFF;font-size:9pt...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年03月16日 12:49
  • 1407

仿QQ长按弹出功能菜单

android app普遍常用的弹出上下文菜单是列表式的。QQ列表,在上方弹出冒泡效果菜单,如图这里讲解一下如何写出这个效果:图片资源:两张图片,可以拼接成如上效果。首先,我们需要写布局文件: la...
  • meijian531161724
  • meijian531161724
  • 2015年07月08日 15:44
  • 3475

模仿QQ的一个很帅的菜单栏

模仿QQ的一个很帅的菜单栏 a{text-decoration:none;color:#000000;font-size:8pt;font-family:verdana}//-->   var top...
  • yihuei123
  • yihuei123
  • 2007年04月30日 10:26
  • 420

Android高仿QQ左右滑动菜单的效果实现方式之安卓菜单左右滑动效果实现方式

今天给大家看一下关于安卓像QQ一样左右滑动菜单的实现方式,完整项目源码在最下方有下载地址,可点击下载,下面我们来看源码。先看看主界面实现: package com.xu81.testflip; im...
  • llqqxf
  • llqqxf
  • 2016年07月18日 16:49
  • 1968

安卓SlideMenu 仿QQ 主页侧滑菜单

先上图 仿qq 5.0Activity 代码package custom.community.com.mydemo;import android.os.Build; import android.o...
  • summer_ck
  • summer_ck
  • 2017年02月09日 11:16
  • 371

【Swift】-- 开源项目侧边栏仿QQ菜单类似 android SlidingMenu

今天发现了一个给力的swift仿QQ侧滑菜单栏的源代码工程。先看下效果: 是不是很炫啊! 博主自带解说博客,有兴趣的童鞋可以看着实现一遍,甚至能够实现得更好呢!! ...
  • u012386696
  • u012386696
  • 2016年07月14日 14:47
  • 1164
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:发一个仿QQ菜单的JS
举报原因:
原因补充:

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