Loading

easyUI resizable组件使用

easyUI resizable组件使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="js/test005.js"></script>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" href="easyui/themes/icon.css">
</head>

<body>
    <div id="box2" class="easyui-resizable" style="border:1px solid black;width:300px;height:300px"></div>
    <div id="box" style="border: 1px solid red;width:300px;height:300px"></div>
</body>

</html>
$(function(argument) {
    var obj = {
        //disabled:true,//不能拖动了；
        handles: 'all', //能够拖动的方向；n-上北，all-全部
        minHeight: 200, //最小能够拖到的高度
        minWidth: 200,
        maxHeight: 400, //最大能够拖到的高度
        maxWidth: 400,
        edge: 10, //拖动的边的宽度
        onStartResize: function(e) { //mousedown
            console.log('onStartResize');
            console.log(e);
        },
        onResize: function(e) { //mousemove
            // console.log('onResize');
            // console.log(e);
            console.log($(this).resizable('options')); //获得options对象；
        },
        onStopResize: function(e) { //mouseup
            console.log('onStopResize');
            console.log(e);
        }
    };
    $('#box').resizable(obj);
$('#box').resizable('disable'); //有效果呀；
$('#box2').resizable('disable'); //有效果呀；
});

 

posted @ 2015-10-07 09:16  stono  阅读(634)  评论(0)  编辑  收藏  举报