改变大小控件
2006-05-27 17:15
435 查看
小小的封装控件（可改变大小，用法同拖动控件一样)
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
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- MFC 控件大小随窗体改变而改变大小-OnSize
- DataGrid 完全攻略之一（在编辑状态下改变控件的显示大小）
- 在VC的win32 Application 工程中，在改变对话框大小时，控件始终保持充满整个客户区的问题
- MFC Dialog子窗口大小随父窗口而能改变，控件随窗口大小而改变
- 随着窗口大小的改变调整控件的位置和大小
- C# WinForm控件随窗体大小改变自动适应改变
- C#里WinForm开发中如何实现控件随窗体大小的改变而自动适应其改变
- C#当窗体大小改变时，窗体中的控件大小也随之改变
- vc picture控件载入背景图，随控件大小改变
- 关于控件Controls随Dialog改变大小 && CDialogResize的总结
- MFC 控件大小随窗体改变而改变大小
- C# 在运行中改变控件大小的类 并获取最后控件的大小
- android 动态改变控件位置和大小
- [C#]控件大小随窗体改变而改变
- VC中自动改变控件位置和大小的对话框类
- 关于动态改变控件大小的一点不同的看法(转)
- 对话框控件随界面大小的改变而改变
- MFC 控件大小随窗体改变而改变大小的总结
- 如何实现控件随窗体大小的改变而自动适应其改变
- [WinForm10-25作业]1.用Size和Location改变控件的大小和位置,使用Point结构体做