EasyUI series Learning (5)-Resizable (resize), easyui-resizable

EasyUI series Learning (5)-Resizable (resize), easyui-resizable

I. Create Components

1. Use tags to create a variable-size window

<div id="rBox" class="easyui-resizable" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>

2. Use JavaScript to create a variable-size window

<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div><script>    $(function () {        $("#rBox").resizable();    });</script>

Ii. Attributes

1. disabled: if it is true, the size adjustment is disabled.

<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div><script>    $(function () {        $("#rBox").resizable({            disabled: true        });    });</script>

2. handles: handle default value: n, e, s, w, ne, se, sw, nw, all

<Div id = "rBox" style = "width: 200px; height: 100px; left: 100px; background: cyan"> </div> <script >$ (function () {$ ("# rBox "). resizable ({// indicates that the arrow handles: "se"}) ;}appears in the southeast direction of the mouse. </script>

3. minWidth, minHeight, maxWidth, and maxHeight

<Div id = "rBox" style = "width: 200px; height: 100px; left: 100px; background: cyan"> </div> <script >$ (function () {$ ("# rBox "). resizable ({// adjustable min width: 150, // adjustable min Height: 80, // adjustable max width: 500, // you can adjust the maximum hitting height. maxHeight: 200}) ;}); </script>

4. edge: Set the edge size (the operation is effective only when padding is understood as <= 50)

<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div> <script>     $(function () {         $("#rBox").resizable({             edge: 50         });     }); </script>

Iii. Events

1. onStartResize: triggered when the size is changed

<Div id = "rBox" style = "width: 200px; height: 100px; background: cyan"> </div> <script >$ (function () {$ ("# rBox "). resizable ({onStartResize: function (e) {console. log ("trigger once when moving") ;}};}); </script>

2. onStopResize: triggered when the stop changes the size

<Div id = "rBox" style = "width: 200px; height: 100px; background: cyan"> </div> <script >$ (function () {$ ("# rBox "). resizable ({onStartResize: function (e) {console. log ("trigger once when moving");}, onStopResize: function (e) {console. log ("triggered every time you press the mouse, triggered once when you stop moving") ;}); </script>

3. onResize: triggered during resizing. When false is returned, the DOM element size is not actually changed.

<Div id = "rBox" style = "width: 200px; height: 100px; background: cyan"> </div> <script >$ (function () {$ ("# rBox "). resizable ({onStartResize: function (e) {console. log ("trigger once when moving");}, onStopResize: function (e) {console. log ("triggered every time you press the mouse, triggered once when you stop moving") ;}, onResize: function (e) {console. log ("always triggered during adjustment"); // return false ;}}) ;}); </script>

Iv. Methods

1. options: return the resize attribute

2. enable: enable the resize function.

3. disable: disable the resize function.

5. Override the default object

<div id="rBox" style="width: 200px; height: 100px; background:cyan"></div><script>    $(function () {        $.fn.resizable.defaults.maxHeight = 500;        $("#rBox").resizable({        });    });</script>