改变大小控件 - Kevin Zou

改变大小控件

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

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>

这是一个div（移动右边和下面，可改变大小哟）

</div>

<div style="height:30px;border:1px solid white;background-color:white;color:black;cursor:move" canMove="1" layernum="1">只有标题可以拖动</div>

这是一个div（可改变大小哟）

</div>

<tr>

<td canMove="1" layernum="3" colspan="2" style="cursor:move;background-color:blue;color:white">这是表格的标题行(也可改变大小)</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

预览
testresize.htm

下载
resizeble.rar

posted on 2006-05-19 14:50 Kevin Zou 阅读(1651) 评论(7) 编辑收藏

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的

　回复　引用　查看　