您的位置：首页 > 产品设计 > UI/UE

easyUI resizable组件使用

2015-10-07 09:16 447 查看
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'); //有效果呀；

});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航