会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
朝露绿客联盟
...从明天起,做一个幸福的人。 ...喂马,劈材,周游世界。 ...从明天起,关心粮食和蔬菜。 ...我有一所房子,面朝大海春暖花开。
CnBlogs
Home
New Post
Admin
【转】改变大小控件
小小的封装控件(可改变大小,用法同
拖动控件
一样)
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
posted @
2006-05-20 13:51
blueKnight
Views(
286
) Comments(
0
)
Edit
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告