net生活
博客园 首页 新随笔 联系 订阅 管理
  30 Posts :: 0 Stories :: 496 Comments :: 26 Trackbacks
改变大小控件

小小的封装控件（可改变大小，用法同拖动控件一样)
canResize（可拖动）,rlayernum(要改变大小的父元件层数)

<!--
Author:        Kw.Tsou
Date:        2005/11/26
Content:    为页面上的元件提供可改变大小的功能
UseMark:    在body上behavior此物件，然后在需要改变大小的物件上设置canResize="1"属性即可
-->
<PUBLIC:COMPONENT>
    <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="resize_eDown()" />
    <PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="resize_eUp()" />
    <PUBLIC:ATTACH EVENT="onmousemove" ONEVENT="resize_eMove()" />
    <PUBLIC:ATTACH EVENT="onscroll" ONEVENT="resize_eUp()" />
    <PUBLIC:EVENT ID="resizeevent"  NAME="ontagresize"/>
</PUBLIC:COMPONENT>
<SCRIPT Language="JavaScript">

    var isse = false;
    var isw = false;
    var iss = false;
    var OFFSET = 10;
    var MINWIDTH = 50;
    var MINHEIGHT = 20;
    var resizeObj = null;        //虚线框物件
    
    function setResizeObj(el){
        if(el!=null){
            resizeObj = el;
            resizeObj.isLock = true;
        }
    }
    
    function releaseResizeObj(){
        if(resizeObj!=null){
            resizeObj.isLock = false;
            var evt = createEventObject();
            evt.src = resizeObj;
            try { resizeevent.fire(evt); } catch(e) {};
            resizeObj = null;
            
        }
    }
    
    function resize_eMove()
    {
        var e = window.event;
        var el = e.srcElement;
        
        if(resizeObj!=null&&window.event.button=="1"){
            var ex = e.clientX;
            var ey = e.clientY;
            var w = resizeObj.offsetWidth + ex - resizeObj.xx;
            var h = resizeObj.offsetHeight + ey - resizeObj.yy ;
            resizeObj.xx = ex;
            resizeObj.yy = ey;
            if(w<MINWIDTH)w=MINWIDTH;
            if(h<MINHEIGHT)h=MINHEIGHT;
            if(isse||isw)
                resizeObj.style.width = w;
            if(isse||iss)
                resizeObj.style.height = h;
            window.event.returnValue = false;
            window.event.cancelBubble = true;
            return false;
                
        }
        
        
        else{
            if(el.canResize=="1"){
                if(el!=null){
                    if(!el.oldcursor){
                        el.oldcursor = el.runtimeStyle.cursor||el.style.cursor;
                        if(!el.oldcursor)
                            el.oldcursor = "default";
                    }
                    
                    var width = el.offsetWidth + el.scrollLeft;
                    var height = el.offsetHeight + el.scrollTop;
                    var offsetX = e.offsetX;
                    var offsetY = e.offsetY;
                    if((width-OFFSET<=offsetX&&offsetX<=width+OFFSET)&&(height-OFFSET<=offsetY&&offsetY<=height+OFFSET)){
                        el.runtimeStyle.cursor = "se-resize";
                        isse = true;
                        isw = false;
                        iss = false;
                    }
                    else if(width-OFFSET<=offsetX&&offsetX<=width+OFFSET){
                        el.runtimeStyle.cursor = "w-resize";
                        isse = false;
                        isw = true;
                        iss = false;
                    }
                    else if(height-OFFSET<=offsetY&&offsetY<=height+OFFSET){
                        el.runtimeStyle.cursor = "s-resize";
                        isse = false;
                        isw = false;
                        iss = true;
                    }
                    else{
                        el.runtimeStyle.cursor = el.oldcursor;
                        isse = false;
                        isw = false;
                        iss = false;
                    }
                    window.event.returnValue = false;
                    window.event.cancelBubble = true;
                }
                
            }

        }
    }
    
    //取得移动对象(如只能拖动标题栏进行移动)
    function getOpreateElement(el){
        var ret = el;
        var layernum = 0;
        if(el.rlayernum)
            layernum = parseInt(el.rlayernum);
        for(var i=0;i<layernum;i++)
        {
            ret = ret.parentElement;
        }
        return ret;
    }


    
    function resize_eDown()
    {
        var e = window.event;
        var el = e.srcElement;
        if((el.canResize=="1")&&(isse||isw||iss)){
            el = getOpreateElement(el);
            if(el!=null){        
                setResizeObj(el);
                resizeObj.xx = e.clientX;
                resizeObj.yy = e.clientY;
                window.status = "按住鼠标左键拖动可改变大小";
                window.event.returnValue = false;
                window.event.cancelBubble = true;
            }
        }
    }

    function resize_eUp()
    {
        releaseResizeObj();
        window.status = "Done";
    }


</SCRIPT>




<html>
<head>
<title>什么都可以拖动，也可改变大小</title>
<style>
body,div,td,font{font:menu;}
div,td{text-align:center}
</style>
</head>
<body style="margin:0px">
<div ontagmove="window.status=' left:' + window.event.src.offsetLeft + ' top:' + window.event.src.offsetTop" style="margin:3px;position:absolute;overflow:hidden;behavior:url(BlogMoveAble.htc) url(BlogResizeAble.htc);border:1px solid gray;width:90%;height:90%;background-color:#efefef">
    <div canResize="1"  canMove = "1" style="background-color:gray;border:1px solid red;cursor:move;top:20px;left:20px;position:absolute;width:100px;height:100px;">
        这是一个div（移动右边和下面，可改变大小哟）
    </div>
    <div  canResize="1"  style="background-color:#e1e1e1;border:1px solid blue;;top:120px;left:120px;position:absolute;width:180px;height:120px;">
        <div style="height:30px;border:1px solid white;background-color:white;color:black;cursor:move" canMove="1" layernum="1">只有标题可以拖动</div>
        这是一个div（可改变大小哟）
    </div>
    <table canResize="1" border="1" bordercolor="green" style="width:50%;height:50%;position:absolute" ID="Table1">
        <tr>
            <td canMove="1" layernum="3" colspan="2" style="cursor:move;background-color:blue;color:white">这是表格的标题行(也可改变大小)</td>
        </tr>
        <tr>
            <td>1</td>
            <td canResize="1" rlayernum="3">2</td>
        </tr>
        <tr>
            <td canResize="1" rlayernum="3">3</td>
            <td canResize="1" rlayernum="3">4</td>
        </tr>
    </table>
</div>
</body>
</html>


预览
testresize.htm

下载
resizeble.rar
posted on 2006-05-19 14:50 Kevin Zou 阅读(1579) 评论(7)  编辑 收藏 网摘 所属分类: DHTML & Javascript

Feedback

#1楼 2006-05-19 15:34 海之心      
好文章!
  回复  引用  查看    

#2楼 2006-05-19 22:03 S.F.
未处理 zIndex ,否则更好 :)
  回复  引用    

#3楼 2006-05-19 22:15 lemoninsky[未注册用户]
没反应，搞不懂
  回复  引用    

#4楼[楼主] 2006-05-20 09:23 小生      
@S.F.
谢谢你的回复
我设计时每个这样的小控件只完成了一个小功能，主要是易于重用，像你讲的zIndex我确实有处理，不过是在我们现在正在开发的一个系统（其首页类似于windows桌面，其它很简单，响应这个控件的ontagmove事件后，把zIndex提高)


@lemoninsky
这些控件我在IE5.0之上测试ok
firefox和其它浏览器好像是不支持htc的

  回复  引用  查看    

#5楼 2006-05-20 14:19 GouGou      
WEB标准这东西。。。真的让人郁闷！
  回复  引用  查看    

#6楼 2006-05-20 14:24 3781[未注册用户]
只能拖动，不能改变大小。

另外Atlas里不是有这样的东西了，已经不用靠手工写代码实现了。
  回复  引用    

#7楼 2006-05-22 20:43 潇笑[未注册用户]
不错
  回复  引用    




发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 404361




相关文章:

相关链接: