关闭

改变大小控件

992人阅读 评论(0) 收藏 举报

小小的封装控件(可改变大小,用法同拖动控件一样)
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
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2289685次
    • 积分:26165
    • 等级:
    • 排名:第229名
    • 原创:1篇
    • 转载:1662篇
    • 译文:0篇
    • 评论:98条
    最新评论