Show: Inherited Protected Private Deprecated

Resizable Class

Extends Base

Module: resizable

缩放功能

拖放 handler 的样式需要调用者自己编写,如下面这个例子的样式。

Constructor

`Resizable`

(

config

)

Parameters:

config Object

Example:

//css
.ks-resizable-handler {
position: absolute;
overflow: hidden;
font-size: 0;
line-height: 0;
z-index: 1;
}
.ks-resizable-handler-t,.ks-resizable-handler-b,  .ks-resizable-handler-r, .ks-resizable-handler-l {
    opacity: 0.6;
    filter: alpha(opacity = 60);
    background-color: #F19EC2;
}
.ks-resizable-handler-t,.ks-resizable-handler-b {
    left: 0;
    height: 5px;
    width: 100%;
    cursor: n-resize;
}
.ks-resizable-handler-b {
    bottom: 0;
}

.ks-resizable-handler-t {
    top: 0;
}
.ks-resizable-handler-r, .ks-resizable-handler-l {
    top: 0;
    height: 100%;
    -height: expression(this.parentNode.offsetHeight);
    width: 5px;
    cursor: e-resize;
}
.ks-resizable-handler-l {
    left: 0;
}

.ks-resizable-handler-r {
    right: 0;
}

.ks-resizable-handler-bl, .ks-resizable-handler-br, .ks-resizable-handler-tl, .ks-resizable-handler-tr {
    position: absolute;
    width: 5px;
    height: 5px;
    border: 1px solid #535353;
    background-color: #E4007F;
    z-index: 2;
}
.ks-resizable-handler-bl {
    left: -3px;
    bottom: -3px;
    cursor: sw-resize;
}

.ks-resizable-handler-br {
    right: -3px;
    bottom: -3px;
    cursor: nw-resize;
}

.ks-resizable-handler-tl {
    left: -3px;
    top: -3px;
    cursor: nw-resize;
}

.ks-resizable-handler-tr {
    right: -3px;
    top: -3px;
    cursor: sw-resize;
}

//javascript
require(['node', 'resizable'], function($, Resizable) {
    var r = new Resizable({
        node:"#something-can-resize",
        // 指定可拖动的位置
        handlers:["b","t","r","l","tr","tl","br","bl"],
        // 可选, 设置最小/最大 宽高
        minHeight:100,
        minWidth:100,
        maxHeight:300,
        maxWidth:400
    });
});

Index
Methods
Attributes
Events

Item Index

Methods

`addAttr`

(

name
attrConfig

)

Inherited from Attribute

给宿主对象增加一个属性

Parameters:

name String

属性名
attrConfig Object

属性配置信息, 支持下面的配置项:
- value String | Number
  
  属性默认值。注意默认值请不要设置为复杂对象（通过自定义构造器 new 出来的），复杂对象可设置 valueFn 返回.如果配置项中没有设置 value, 会调用 valueFn 函数获取默认值并赋给 value
- valueFn Function
  
  提供属性默认值的函数，传入对象内部对应的属性值和属性名，取该函数的返回值作为最终值给用户
- setter Function
  
  写属性时的处理函数，传入从 set() 参数得到的属性值和属性名，如果返回非 undefined 则作为新的属性设置值
- getter Function
  
  读属性时的处理函数
- validator Function
  
  写属性时的验证函数，传入从 set() 参数得到的属性值和属性名，返回 false 则不改变该属性值

`addAttrs`

(

attrConfigs
values

)

Inherited from Attribute

批量添加属性

Parameters:

attrConfigs Object

属性名/配置信息对
values Object

属性名/值对, 批量设置当前对象的属性值

`addTarget`

(

target

)

Inherited from CustomEvent.Target

添加冒泡事件源对象

Parameters:

target Object

事件往上冒泡的事件源

Example:

require(['util', 'event/custom'], function(Util, CustomEvent) {
    function Custom(id){
        this.id = id;
        this.publish("run",{
            bubbles:1
        });
    }

    Util.augment(Custom, CustomEvent.Target);

    var c1 = new Custom("c1");

    var c2 = new Custom("c1");

    c1.addTarget(c2);

    c2.on("run",function(e){
        S.log(e.target.id +" fires event run"); // => c1 fires event run
    });

    c1.fire("run");
});

`callSuper`

()

Inherited from Base

调用父类的对应方法，如果没有，则返回undefined

Example:

require(['base'], function(Base) {
    var A = Base.extend({
        m: function (value) {
            return 'am:' + value;
        },
        m2: function (value) {
            return 'am2:' + value;
        }
    });

    var B = A.extend({
        m: function(value) {
            return 'bm:(' + this.callSuper(value) + ')';
        },
        m2: function(value) {
            return 'bm2(' + this.callSuper.apply(this, arguments) + ')';
        }
    });

    var b = new B();
    console.log(b.m(1));
    console.log(b.m2(2));
});

`destroy`

()

Inherited from Base but overwritten by this Class

销毁该组件, 取消元素上的缩放功能.

`detach`

(

eventType
fn
[scope]

)

Inherited from CustomEvent.Target

解除绑定的事件处理器

Parameters:

eventType String | Object
fn Function

当事件触发时的回调函数
[scope] Object optional

回调函数的 this 值. 如果不指定默认为绑定事件的当前元素

`extend`

(

[extensions]
methodDesc
staticAttributes
desc

)

Inherited from Base

从当前类上扩展出一个子类

Parameters:

[extensions] Function[] optional

扩展类数组
methodDesc Object

方法集合键值对
staticAttributes Object

放到新产生组件类上的静态属性集合键值对，其中 ATTRS 属性特殊对待
desc Object

类元信息
- name String
  
  类名

`fire`

(

type
eventData

)

Boolean

Inherited from CustomEvent.Target

触发绑定 type 类型的事件处理器, 并给触发的事件处理器的事件对象参数中混入数据 eventData

Parameters:

type String

要触发的自定义事件名称
eventData Object

要混入触发事件对象的数据对象

Returns:

Boolean:

如果其中一个事件处理器返回 false , 则返回 false, 否则返回最后一个事件处理器的返回值

`get`

(

name

)

Inherited from Attribute

获取属性 name 的值

Parameters:

name String

属性名.也可以为 “x.y” 形式. 此时要求 x 属性为包含 y 属性的普通 Object.当没有设置属性值时, 会取该属性的默认值

`getAttrVals`

() Object

Inherited from Attribute

获取目前实例的所有属性键值对集合

Returns:

Object:

属性键值对集合

`getPlugin`

(

id

)

Inherited from Base

根据指定的 id 获取对应的plugin实例

Parameters:

id String

plugin实例的id

Returns:

对应的plugin实例

Example:

dialog.getPlugin('component/plugin/drag')
   .getPlugin('dd/plugin/constrain')
   .set('constrain', false);

`hasAttr`

(

name

)

Boolean

Inherited from Attribute

判断是否有名为 name 的属性

Parameters:

name String

属性名

Returns:

Boolean:

`on`

(

eventType
fn
[scope]

)

Inherited from CustomEvent.Target

为相应事件添加事件处理器

Parameters:

eventType String | Object
- 当为String时包含一个或多个事件名称的字符串, 多个事件名以空格分开。事件可以通过加点来表示分组，例如 "click.one" , "click.two"
- 当为Object时，类似这样：
```
{
  'click':{
      fn:function(){
      },
      filter: '' // delegate,
      once:true // 绑定一次
  },
  'mouseenter':function(){}
}
```
fn Function

当事件触发时的回调函数
[scope] Object optional

回调函数的 this 值. 如果不指定默认为绑定事件的当前元素

`plug`

(

plugin

)

Inherited from Base

安装指定插件

Parameters:

plugin Function | Object

指定的插件构造器或者插件对象

Returns:

自身

Example:

require(['overlay', 'component/plugin/resize'],function(Overlay,Resize){
    new Overlay({
        content:'test'
    }).plug(new Resize({
        handlers:['t','t']
    }));
});

`publish`

(

type
cfg

)

Inherited from CustomEvent.Target

配置自定义事件的一些特有信息

Parameters:

type String

要触发的自定义事件名称
cfg Object

事件的具体配置对象
- [bubbles=true] Boolean optional
  
  类型 boolean. 是否支持冒泡。默认 true
- [defaultFn] Function optional

`removeAttr`

(

name

)

Inherited from Attribute

删除名为 name 的属性

Parameters:

name String

属性名

`removeTarget`

(

target

)

Inherited from CustomEvent.Target

删除冒泡事件源对象

Parameters:

target Object

事件往上冒泡的事件源

`reset`

(

name
opts

)

Inherited from Attribute but overwritten by this Class

重置属性 name 为初始值. (调用一次 set() )

Parameters:

name String

属性
opts Object

控制对象，包括以下控制选项
- silent=false Boolean
  
  默认 false , 是否触发 change 系列事件

`set`

(

name
value
opts

)

Boolean

Inherited from Attribute

设置属性 name 的值为 value

Parameters:

name String

属性名.也可以为 “x.y” 形式，此时要求 x 属性为包含 y 属性的普通 Object，这时会设置 x 属性值的 y 属性.但只会触发 x 的相关 change 事件
value String

属性的值
opts Object

控制对象，包括以下控制选项
- silent=false Boolean
  
  默认 false , 是否触发 change 系列事件
- error Function
  
  验证失败的回调，包括失败原因
- force Function
  
  是否强制触发 change 事件，默认值为 false，当值发生变化时才触发

Returns:

Boolean:

该次属性设置是否生效（是否通过了 validator 验证）

`unplug`

(

plugin

)

Inherited from Base

卸载指定插件

Parameters:

plugin Function | Object

指定的插件构造器或者插件对象

Returns:

自身

Example:

require(['overlay','component/plugin/resize'],function(Overlay,Resize){
    var o= new Overlay({
        content:'test'
    }).plug(new Resize({
        handlers:['t','t']
    }));

    o.unplug('component/plugin/resize'); // 卸载 resize 插件
});

Attributes

`handlers`

String[]

默认为 [], 表示可拖动元素的哪些位置来进行缩放. 可取下列值: “b”,”t”,”r”,”l”,”tr”,”tl”,”br”,”bl”．其中, t,b,l,r 分别表示 top,bottom,left,right, 加上组合共八种取值, 可在上, 下, 左, 右以及左上, 左下, 右上, 右下进行拖动.

Default: []

`listeners`

Object

Inherited from Base

配置组件的事件绑定,例如:

{
    listeners:{
        customEvent:function(e){
            alert(e.type); // => "customEvent"
        }
    }
}

or

{
    listeners:{
        customEvent:{
            fn:function(e){
                // e.type // => customEvent
                // this.xx => 1
            },
            context:{xx:1}
        }
    }
}

`maxHeight`

Number

默认为0, 表示拖动缩放的最大高度

Default: 0

`maxWidth`

Number

默认为0, 表示拖动缩放的最大宽度

Default: 0

`minHeight`

Number

默认为0, 表示拖动缩放的最小高度

Default: 0

`minWidth`

Number

默认为0, 表示拖动缩放的最小宽度

Default: 0

`node`

String | HTMLElement | KISSY.Node

将要进行缩放的节点

`plugins`

Function[] | Object[]

Inherited from Base

插件构造器数组或插件对象数组. 例如

{
    plugins: [ Plugin1,Plugin2 ]
}

// or

{
    plugins: [new Plugin1(cfg),new Plugin2(cfg)]
}

`preserveRatio`

Boolean

是否在 resize 的过程中保持 width/height 比例

Events

`*Change`

Inherited from Attribute

每调用 set() 一次后就触发一次该事件

Event Payload:

e Object

回调函数传入的对象
- newVal
  
  本次 set 导致的属性当前值集合
- prevVal
  
  本次 set 导致的属性在 set 前的值集合
- attrName String
  
  本次 set 导致改变的属性名集合
- subAttrName String
  
  本次 set 导致的属性全名集合

`afterAttrNameChange`

Inherited from Attribute

名为 “attrName” 的属性, 在改变它的值之后触发该事件

Event Payload:

e Object

回调函数传入的对象
- newVal
  
  当前的属性值
- prevVal
  
  当前改变前的属性值
- attrName String
  
  当前的属性名，例如 “x”
- subAttrName String
  
  当前的完整属性名，例如 “x.y”

`beforeAttrNameChange`

Inherited from Attribute

名为 “attrName” 的属性, 在改变它的值之前触发该事件

Event Payload:

e Object

回调函数传入的对象
- newVal
  
  将要改变到的属性值
- prevVal
  
  当前的属性值
- attrName String
  
  当前的属性名，例如 “x”
- subAttrName String
  
  当前的完整属性名，例如 “x.y”

`resize`

拖放中触发

`resizeEnd`

结束拖放后触发

`resizeStart`

开始拖放后触发

APIs

Resizable Class

Constructor

Resizable

Parameters:

Example:

Item Index

Methods

Attributes

Events

Methods

addAttr

Parameters:

addAttrs

Parameters:

addTarget

Parameters:

Example:

callSuper

Example:

destroy

detach

Parameters:

extend

Parameters:

fire

Parameters:

Returns:

get

Parameters:

getAttrVals

Returns:

getPlugin

Parameters:

Returns:

Example:

hasAttr

Parameters:

Returns:

on

Parameters:

plug

Parameters:

Returns:

Example:

publish

Parameters:

removeAttr

Parameters:

removeTarget

Parameters:

reset

Parameters:

set

Parameters:

Returns:

unplug

Parameters:

Returns:

Example:

Attributes

handlers

listeners

maxHeight

maxWidth

minHeight

minWidth

node

plugins

preserveRatio

Events

*Change

Event Payload:

afterAttrNameChange

Event Payload:

beforeAttrNameChange

Event Payload:

resize

resizeEnd

resizeStart

`Resizable`

`addAttr`

`addAttrs`

`addTarget`

`callSuper`

`destroy`

`detach`

`extend`

`fire`

`get`

`getAttrVals`

`getPlugin`

`hasAttr`

`on`

`plug`

`publish`

`removeAttr`

`removeTarget`

`reset`

`set`

`unplug`

`handlers`

`listeners`

`maxHeight`

`maxWidth`

`minHeight`

`minWidth`

`node`

`plugins`

`preserveRatio`

`*Change`

`afterAttrNameChange`

`beforeAttrNameChange`

`resize`

`resizeEnd`

`resizeStart`