改变大小控件

转载 2006年05月27日 17:15:00

小小的封装控件(可改变大小,用法同拖动控件一样)
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
http://tsoukw.cnblogs.com/archive/2006/05/19/404361.html

相关文章推荐

Windows Media player控件大小改变

  • 2013年09月24日 13:57
  • 217KB
  • 下载

设置控件随窗口大小而改变

第一步:在类中加入成员函数和成员变量 public: void SetControlInfo(WORD CtrlId); protected: int m_old_cx,m_old_...

随窗体变化自动改变控件大小

  • 2004年07月23日 00:00
  • 31KB
  • 下载

VB自动改变控件大小

  • 2007年09月10日 23:05
  • 2KB
  • 下载

MFC控件大小随窗体改变而改变

在一个基于MFC的Dialog上布置许多控件的时候,有时候在改变Dialog大小的时候控件不随着改变,现在告诉大家怎么让Dialog所有控件随Dialog改变而改变。   现在已最简单新建的对话框,...

关于控件Controls随Dialog改变大小 && CDialogResize的总结

一、问题描述 对话框所有控件Controls可随对话框Dialog大小比例的变化而变化位置和大小。 二、解决方法 1、 声明一对double值存储原始对话框大小m_OriginX & m_Orig...

Delphi实现控件拖动及改变大小

  • 2015年01月01日 14:22
  • 656KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:改变大小控件
举报原因:
原因补充:

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