resize - 调整大小控件

对一个节点需要进行鼠标大小调整,可以用这个控件来实现,但ui上的结构需要传给resize控件,四周的8个节点需要在结构上进行传入

Allocate

ui selector控件所在脚本 {lib}util/resize/resize.js
页面结构如下:

横向拖动的样式:

.box{width:600px;height:600px;}
.body{width:200px;height:200px;border:1px solid #ccc;position:relative}
.topleft{position:absolute;top:0;left:0;width:3px;height:3px;line-height:3px;background:transparent;z-index:100;cursor:nw-resize;overflow:hidden}
.top{position:absolute;top:0;width:100%;height:3px;line-height:3px;background:transparent;z-index:99;cursor:n-resize;overflow:hidden}
.topright{position:absolute;top:0;right:0;width:3px;height:3px;line-height:3px;background:transparent;z-index:100;cursor:ne-resize;overflow:hidden}
.left{position:absolute;left:0;top:0;width:3px;height:100%;background:transparent;z-index:99;cursor:w-resize;overflow:hidden}
.right{position:absolute;right:0;top:0;width:3px;height:100%;background:transparent;z-index:99;cursor:e-resize;overflow:hidden}
.bottomleft{position:absolute;left:0;bottom:0;width:3px;height:3px;line-height:3px;background:transparent;z-index:100;cursor:sw-resize;overflow:hidden}
.bottom{position:absolute;bottom:0;left:0;width:100%;height:3px;line-height:3px;background:transparent;z-index:99;cursor:s-resize;overflow:hidden}
.bottomright{position:absolute;bottom:0;right:0;width:3px;height:3px;line-height:3px;background:transparent;z-index:100;cursor:se-resize;overflow:hidden}

结构:

<div id="box" class="box">
     <div class="body" id="body">
        <div class="topleft js-rs-5">&nbsp;</div>
        <div class="top js-rs-1"></div>
        <div class="topright js-rs-6">&nbsp;</div>
        <div class="left js-rs-4">&nbsp;</div>
        <div class="right js-rs-2">&nbsp;</div>
        <div class="bottomleft js-rs-8">&nbsp;</div>
        <div class="bottom js-rs-3">&nbsp;</div>
        <div class="bottomright js-rs-7">&nbsp;</div>
     </div>
</div>

分配

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _tu = _('t.u'),
        _p = _('nej.ut');

    var _resize = _p._$$Resize._$allocate({view:_e._$get('box'),body:_e._$get('body'),onresize:onReisze})
    function onReisze(_event){
        _tu._$log('left:'+_event.left+',top:'+_event.top+',width:'+_event.width+',height:'+_event.height)
    };
    _tu._$processCode();
}
define(['{lib}util/resize/resize.js', '{pro}js/extend.js'],f);

更多的参数信息请参照resize.js api说明

Explain

拖动边框的结构样式

 5------ 1 ------6

 |               |

 |               |

 4               2

 |               |

 |               |

 8------ 3 ------7

clazz [Object] - 各方向节点样式名

 1 - 向上改变大小,对应鼠标手型n-resize,默认样式名js-rs-1

 2 - 向右改变大小,对应鼠标手型e-resize,默认样式名js-rs-2

 3 - 向下改变大小,对应鼠标手型s-resize,默认样式名js-rs-3

 4 - 向左改变大小,对应鼠标手型w-resize,默认样式名js-rs-4

 5 - 向左上改变大小,对应鼠标手型nw-resize,默认样式名js-rs-5

 6 - 向右上改变大小,对应鼠标手型ne-resize,默认样式名js-rs-6

 7 - 向右下改变大小,对应鼠标手型se-resize,默认样式名js-rs-7

 8 - 向左下改变大小,对应鼠标手型sw-resize,默认样式名js-rs-8

如果不传clazz参数,拖动的点的的8个样式需要放上面的序号写在结点上,如果要传clazz参数,他的key和value的样式名也要按序列传入

view 视窗,超过视窗拖动无效,默认是document.body

body 拖动的节点,要给这个节点设为position relative

onresize 拖动时回调函数,回调函数传入的参数是 top left width height 值

Recycle

resize.$recycle();

External interface

Known Issues

Demo

resize 控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus