改变大小控件

转载 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

Android中动态改变控件的大小的一种方法

在Android中有时候我们需要动态改变控件的大小。有几种办法可以实现  一是在onMeasure中修改尺寸,二是在onLayout中修改位置和尺寸。这个是可以进行位置修改的,onMeasure不行...
  • yangpeng98
  • yangpeng98
  • 2013年12月16日 16:41
  • 2805

C#当窗体大小改变时,窗体中的控件大小也随之改变

转自:http://www.cnblogs.com/slyzly/articles/1965965.html 第一种:推荐 在窗体中加上如下代码即可实现,但窗体点击放大按钮时却不能改变...
  • zhichao2001
  • zhichao2001
  • 2016年01月21日 09:39
  • 2931

C#当窗体大小改变时,控件的位置和大小随之改变

原文地址:http://www.cnblogs.com/slyzly/articles/1965965.html。因为需要,因为经典,所以必须转。再加上自己对于第四种方法的一些心得。这算转载还是原创呢...
  • SLsuifengyaobai
  • SLsuifengyaobai
  • 2015年02月28日 17:14
  • 1988

Tap控件包含子窗体随主窗体大小而改变

  • 2015年12月24日 11:52
  • 62KB
  • 下载

Windows Media player控件大小改变

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

一劳永逸让VB自动改变控件大小

  • 2012年11月16日 03:53
  • 1KB
  • 下载

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

  • 2015年01月01日 14:22
  • 656KB
  • 下载

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

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

VB自动改变控件大小

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

精彩编程与编程技巧-自动改变控件大小...

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

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