对象化JS之----仿outlook或者QQ的菜单

转载 2004年07月01日 10:48:00
标题     对象化JS之----仿outlook或者QQ的菜单    chenzengxi(原作)
关键字     对象化 菜单

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<style type='text/css'>
.folder1 {text-align:center; background: #00A4E1; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #FFFFFF #00BBFF; cursor: hand; font-size: 9pt}
.folder2 {text-align:center; background: #20C1FF; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}
.foldercont{background: #D9ECF4; border: 1px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt; cursor: default;}
</style>

<SCRIPT LANGUAGE=javascript>
onload=function(){
 var lstr = ""
 for (var i=0; i<30; i++) lstr+= "haha..<br>";
 var lofolder = new outlookfolder(null,335,100,15);
 lofolder.addfolder("菜单1","1..<br>2..");
 lofolder.addfolder("菜单2",lstr);
 lofolder.addfolder("菜单3");
 lofolder.addfolder("菜单4");
 lofolder.addfolder("菜单5");
 lofolder.showfolderX(0);
}
     //[容器,高,宽,展开速度]
function outlookfolder(aoP,aih,aiw,ait){
 if (aih==null) aih=200;
 if (aiw==null) aiw="100%";
 if (ait==null) ait=10;
 var loMain  = document.createElement("<span style='overflow:hidden;height:"+aih+";width:"+aiw+"'></span>");
    var lsUniqueID = loMain.uniqueID;
 var loSlide = document.createElement("span");
    loSlide.innerHTML = "<button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;width:10;height:10'></button><button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckdown()' style='position:absolute;display:none;width:10;height:10'></button>";
 var liContH = aih;
    if (aoP==null){
        document.body.appendChild(loMain);
        document.body.appendChild(loSlide);
    }else{
        aoP.appendChild(loMain);
        aoP.appendChild(loSlide);
    }
         //增加一个目录[名字,内容]
    loMain.addfolder = function(str,cont){
     var loPar = document.createElement("SPAN");
     loPar.innerHTML = "<span onclick='"+lsUniqueID+".showme(this)' style='overflow:hidden;width:100%;' class='folder1'></span><span style='position:relative;overflow:hidden;width:100%;height:1' class='foldercont'></span>";
  this.appendChild(loPar);
  loPar.children[0].innerHTML = (str==null?" ":str);
  loPar.children[1].innerHTML = (cont==null?" ":cont);
  liContH -= parseInt(loPar.children[0].offsetHeight);
    }
         //打开/关闭第x个目录夹
 loMain.showfolderX = function(aix){
  loMain.showme(loMain.children[aix].children[0])
 }
      //打开/关闭当前obj所在的目录
    loMain.showme = function(obj){
  if (loMain.moving) return;
  loMain.moving = true;
  if (obj.bOpen){
   obj.bOpen = false;
   loMain.closefolder(obj.parentElement.children[1]);
   obj.className = 'folder1';
  }else{
   obj.bOpen = true;
   loMain.openfolder(obj.parentElement.children[1]);
   obj.className = 'folder2';
   var lxfolders = loMain.children;
   for (var i=0; i<lxfolders.length; i++){
    var loChild = lxfolders[i].children[0];
    if(loChild.uniqueID!=obj.uniqueID){
     lxfolders[i].children[1].style.height=1;
     loChild.bOpen = false;
     loChild.className = 'folder1';
    }
   }
  }
  loMain.SlideItemsAction(obj.parentElement.children[1]);
    }
         //为目录内容设置Slide
    var loSlideItem = null;
 var lbSlideing = false;
 loMain.SlideCilckdown = function(){  //向下滚动
  loSlideItem.scrollTop += 2;
  if (!lbSlideing&&loSlideItem.scrollTop<loSlideItem.scrollHeight) setTimeout(lsUniqueID+'.SlideCilckdown()',1)
 }
 loMain.SlideCilckup = function(){  //向上滚动
  loSlideItem.scrollTop -= 2;
  if (!lbSlideing&&loSlideItem.scrollTop>0) setTimeout(lsUniqueID+'.SlideCilckup()',1)
 }
 loMain.SlideClickStart = function(){ //允许开始滚动
  lbSlideing=false;
 }
 loMain.SlideClickStop = function(){  //强制停止滚动
  lbSlideing=true;
 }
    loMain.SlideItemsAction = function(obj){
  var loUp   = loSlide.children[0];
  var loDown = loSlide.children[1];
  if (obj.scrollHeight<=liContH||obj.parentElement.children[0].bOpen!=true){
   loUp.style.display="none";
   loDown.style.display="none";
  }else{
   loSlideItem = obj;
   var lxOffset = getTrueOffset(obj);
   var lileft = lxOffset[0]+obj.offsetWidth-20;
   var litop  = lxOffset[1]+obj.offsetHeight+5;
   with(loUp.style){
    display="";
    left=lileft;
    top=litop;
   }
   with(loDown.style){
    display="";
    left=lileft;
    top=litop+liContH-40;
   }
  }
    }
        //逐渐关闭obj所在的内容显示
 loMain.closefolder = function(obj,ai){
  if (ai==null) ai=liContH;
  if (ai<ait){ obj.style.height=1; ai=1}
  if (ai>1){
   obj.style.height = ai;
   ai -= ait;
   setTimeout(lsUniqueID+'.closefolder('+obj.uniqueID+','+ai+')',1)
   return;
  }
  loMain.moving = false;
 }
     //逐渐打开obj所在的内容显示
 loMain.openfolder = function(obj,ai){
  if (ai==null) ai=1;
  if (liContH>ai){
   obj.style.height = ai;
   ai += ait;
   setTimeout(lsUniqueID+'.openfolder('+obj.uniqueID+','+ai+')',1)
   return;
  }
  loMain.moving = false;
 }
 function getTrueOffset(e){
    var x=0; var y=0;
    if(!e)return [x,y];
    while(e){
      x+=parseInt(e.offsetLeft);
      y+=parseInt(e.offsetTop);
      e=e.offsetParent;
   }
   return [x,y];
  }
  return loMain;
}
</SCRIPT>


Android开发技巧——使用Dialog实现仿QQ的ActionSheet菜单

最近看到有人用Dialog来实现QQ的仿ActionSheet的自定义菜单,对于自己没实现过的一些控件,看着也想实现一下。于是动手了一下,发现也不难,和大家分享一下。本文原创,转载请注明出处:在这里我...
  • maosidiaoxian
  • maosidiaoxian
  • 2015年05月28日 10:40
  • 7093

高仿QQ6.0侧滑菜单之滑动优化(二)

1、高仿QQ6.0侧滑 2、加上平滑效果 3、github地址:https://github.com/wuyinlei/QQ6.0
  • wuyinlei
  • wuyinlei
  • 2016年02月01日 10:51
  • 4013

用DevExpress做界面开发:仿Office的Winforms界面框架

DevExpress Winforms Controls拥有超过130个控件和库,它囊括了满足WinForms平台的几乎所有开发工具。无论是Office风格,还是可触摸操作还是以数据为主的商业智能应用...
  • IBigPig
  • IBigPig
  • 2015年11月04日 15:24
  • 1580

javascript继承5种方式,详细的介绍了js的对象化

  • 2013年09月23日 15:26
  • 32KB
  • 下载

C语言对象化设计的实例——LCD菜单

这是我十三年前读研究生的时候写的系列文章《C语言嵌入式系统编程修炼》系列文章中的一小节,是一个用面向对象,把LCD上面菜单,对象化的例子。该文章原始出处: http://soft.yesky.com...
  • juS3Ve
  • juS3Ve
  • 2017年11月16日 00:00
  • 70

node.js与dojo完美的融合-开发完全面向对象化

最近学习了一下node.js,由于我是dojo出身,所以,觉得node.js并不是非常的面向对象化,并不满足面向对象的几个基本条件“封装”、“继承”、“多态”、“重载”等,虽然这些条件,JS是可以模拟...
  • cory10
  • cory10
  • 2011年12月27日 22:19
  • 570

js - 对象化

谢了js也有一年了,本来在三个月左右就开始写封装类的,但是由于没有总结和忙,所以自己写的js都是“散装”的,其实好的想法要延续的,随意以后写js一定要养成习惯写成封装类,今天就总结一些前一段时间写的j...
  • u012246458
  • u012246458
  • 2015年03月19日 16:47
  • 411

js的对象化代码

Insert title here /*  * 初探  */ //变量的定义 var name = 'xxx'; var email = 'xxx@163.com'; var...
  • kakaka2011
  • kakaka2011
  • 2013年03月01日 14:26
  • 574

jsp的仿outlook的js菜单

  • 2009年12月06日 18:00
  • 2KB
  • 下载

java,数据json对象化

  • 2017年10月19日 12:13
  • 338B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:对象化JS之----仿outlook或者QQ的菜单
举报原因:
原因补充:

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