草履虫在路上

项目:区域块伸缩效果实现(toggle效果,javascript类实现)
作者:草履虫
邮件:caolvchong@gmail.com
开发平台:windows server 2003
测试平台:Firefox 2.0.11,IE6,IE7,基于IE7核心的Maxthon,GreenBrowser
开发工具:Aptana
时间:2007-12-12
首发:http://cceer.xmu.edu.cn/blog/post/toggle.html
版权说明:转载请务必注明上面这段话和出处

项目描述:通过javascript类实现网页区域块伸缩效果的实现.
调用操作:
  引用js文件,加入到你需要的网页.(当然,你完全可以使用jQuery,它也有toggle)
  在页面载入后(使用window.onload),调用类.例子如下:
    id为a的节点要控制id为b的节点.点击a,如果b为关闭则打开,如果b为打开则关闭
    window.onload = function(){
      var t = new _toggle($.id("b"));
      $.id("a").onclick = function(){
        t.toggle();
      }
    }
    对于多个节点类似处理
一些特点:
  1.支持区域块高度未知情况(比如div高度自适应)
  2.支持区域块默认关闭情况(比如div的display开始为none)
  3.速度级别可以自定义
  4.支持外部css(当然包括内部css)
  5.你来帮找找 ^_^
bug汇报:
  请联系我的email:caolvchong@gmail.com

/*------------------------------------------------
 * 作者:草履虫
 * email:caolvchong@gmail.com
 * Version:toggle 1.0 ^_^
 * 版权:使用请保留这段信息
 * 时间:2007年12月12日
 * -----------------------------------------------
 */
var $ ={
	style:function(node){
		return node.currentStyle || document.defaultView.getComputedStyle(node,null) || node.style;
	},
	height:function(node){
		return parseInt($.style(node).height) || parseInt(node.clientHeight);
	},
	id:function(node){
		return document.getElementById(node);
	}
}
function _toggle(node,speed){
	this.node = node;
	switch(speed){
		case "fast":
			this.speed = 10;
			break;
		case "normal":
			this.speed = 5;
			break;
		case "slow":
			this.speed = 2;
			break;
		default:
			this.speed =5;
	}
	this.run = 1;
	this.max_height = $.height(this.node);
	this.node.style.height = this.max_height;
	this.display = $.style(this.node).display;
	this.node.style.overflow = "hidden";
	if(this.max_height <=0 || this.display == "none"){
		this.flag = 1;
	}else{
		this.flag = -1;
	}
}
_toggle.prototype.up_down = function(){
	if(this.node.style.display == "none"){
		this.node.style.display = "block";
		this.node.style.height ="0px";
	}
	this.box_height = parseInt($.style(this.node).height);
	this.box_height -= this.speed * this.flag;
	if(this.box_height > this.max_height){
		window.clearInterval(this.t);
		this.box_height = this.max_height;
		this.run =1;
	}
	if(this.box_height <0){
		window.clearInterval(this.t);
		this.box_height = 0;
		this.node.style.display ="none";
		this.run =1;
	}
	this.node.style.height = this.box_height + "px";
}

_toggle.prototype.toggle = function(){
	var temp = this;
	if(this.run == 1){
		this.flag *= -1;
		this.run =0;
		this.t = window.setInterval(function(){temp.up_down();},10);
	}
}