改变大小控件

最新推荐文章于 2023-04-30 11:09:17 发布

转载最新推荐文章于 2023-04-30 11:09:17 发布 · 153 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使网页元素可拖动并可调整大小的方法，通过使用特定的HTC行为文件，实现对div、表格等元素的大小调整功能。用户只需在需要调整大小的对象上设置canResize属性，即可轻松实现该功能。

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