lenew

 

一个拉动菜单效果 DrawerTab

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
  <TITLE>Tab Drawer Show</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY id="mainbody">
<div id="div1_handle" style="cursor:hand;cursor:pointer;">◇今日快报 A◇</div>
<!--div的高度，宽度在样式里设置-->
<div id="div1" style="min-height:0px;height:auto;overflow:hidden;display:none;">
        1.This is some content.<br/>
        1.This is some content.<br/>
        1.This is some content.<br/>
        1.This is some content.<br/>
        1.This is some content.<br/>
        1.This is some content.<br/>
        1.This is some content.<br/>
        1.This is some content.<br/>
</div>
<div id="div2_handle" style="cursor:hand;cursor:pointer;">◇今日快报 B◇</div>
<div id="div2" style="min-height:0px;height:auto;overflow:hidden;display:none;">
        2.This is some content.<br/>
        2.This is some content.<br/>
        2.This is some content.<br/>
        2.This is some content.<br/>
        2.This is some content.<br/>
        2.This is some content.<br/>
        2.This is some content.<br/>
        2.This is some content.<br/>
</div>
<div id="div3_handle" style="cursor:hand;cursor:pointer;">◇今日快报 C◇</div>
<div id="div3" style="min-height:0px;height:auto;overflow:hidden;display:none;">
        3.This is some content.<br/>
        3.This is some content.<br/>
        3.This is some content.<br/>
        3.This is some content.<br/>
        3.This is some content.<br/>
        3.This is some content.<br/>
        3.This is some content.<br/>
        3.This is some content.<br/>
</div>
  <script type="text/javascript" src="http://prototypejs.org/javascripts/prototype.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
    var TabDrawer = Class.create();
    TabDrawer.prototype = {
        /*
         * div 展开或者缩入的DIV
         * handle 用户控制这个element的元素，即鼠标单击这个element，div开始动作
         * C 额外参数
         * C.bAniWidth:动画变换宽，C.bAniHeight:动画变换高，C.bHideHandle:展开内容后隐藏Handle
         */
        initialize : function(div,handle,C) {
            this._height = div.getHeight();;
            this._width = div.getWidth();
            this._originalHeight = 0;
            this._originalWidth = div.getWidth();
            this._div = div;
            this._div.expanded = false;
            this._handle = handle;//用于处理获取展开事件的Handle
            if(C) {
                this._aniWidth = C.bAniWidth?true:false;
                this._aniHeight = C.bAniHeight?true:false;
                this._hideHandle = C.bHideHandle?true:false;
            }
            Event.observe(this._handle,'mouseover',function(e){
                Event.stop(e);
                this._handle.trigger = setTimeout(function(){
                    if(!this._div.expanded) {
                        this.expand();
                    }
                }.bind(this),300);
            }.bind(this));
            Event.observe(this._handle, 'mouseout', function(e) {
                clearTimeout(this._handle.trigger);
            }.bind(this));
        },
        setHeight : function(val) {
            this._div.setStyle({
                height:val + 'px'
            });
        },
        setWidth : function(val) {
            this._div.setStyle({
                width:val + 'px'
            });
        },
        animate : function(step,from,to,timeout,action,done) {
            if( ((step > 0 && from < to)||(step < 0 && from > to))) {
                from += step;
                if(((step > 0 && from > to)||(step < 0 && from < to))) from = to;
                if(action) action(from);
            } else {
                if(done) done();
                return;
            }
            this.setCallback(timeout);
        },
        setCallback : function(timeout) {
            var fn = this.setCallback.caller;
            var args = fn.arguments;
            setTimeout(function(){fn.apply(this,args)}.bind(this),timeout);
        },
        expand : function() {
            if(TabDrawer.__expandedDiv)
                TabDrawer.__expandedDiv.collapse();
            TabDrawer.__expandedDiv = this;

            this._div.expanded = true;

            this._div.show();
            if(this._hideHandle)this._handle.hide();
            if(this._aniWidth)
                this.animate(15,
                    0,
                    this._height,20,
                    function(val){this.setHeight(val)}.bind(this));
            if(this._aniHeight)
                this.animate(15,
                    0,
                    this._width,20,
                    function(val){this.setWidth(val)}.bind(this));
        },
        collapse : function() {
            this._div.expanded = false;
            if(this._hideHandle)this._handle.show();

            if(this._aniWidth)
            this.animate(-15,
                this._div.getHeight(),
                0,20,
                function(val) {
                    this.setHeight(val)
                }.bind(this),
                function(val) {
                    this._div.hide();
                    
                }.bind(this));
            if(this._aniHeight)
                this.animate(-15,
                    this._div.getWidth(),
                    0,20,
                    function(val){this.setWidth(val)}.bind(this));
        }
    };
    //初始化一个或者多个TabDrawer
    var dr = new TabDrawer($('div1'),$('div1_handle'),{bAniWidth:true,bAniHeight:false,bHideHandle:true});
    //第一个展开
    dr.expand();
    new TabDrawer($('div2'),$('div2_handle'),{bAniWidth:true,bAniHeight:false,bHideHandle:true});
    new TabDrawer($('div3'),$('div3_handle'),{bAniWidth:true,bAniHeight:false,bHideHandle:true});
  //-->
  </SCRIPT>
 </BODY>
</HTML>

posted on 2008-04-14 19:49  冰融  阅读(267)  评论(0)    收藏  举报

导航