jquery------.resizable()的使用

时间:2023-12-05 13:59:26

index.jsp

//加上这两行代码,右下角会有样式效果
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css"> <div id="other" >
<div id="title" style="background-color:#aaa;width:100px;height:100px">哈哈</div>
</div>

my.js

$(document).ready(function(){
$("#other").find("#title").resizable({
helper:"help", //移动时出现的边框
handles: "se", //扩展的方向
minHeight: 100, //滑动后最小高(宽)度
maxHeight: 400, //滑动后最大高(宽)度
animate:true, //滑动变化效果
aspectRatio: 1/1, //滑动宽高比
//grid: 50, //以格子形式滑动
alsoResize: "#tit", //带动别的部件滑动
ghost:true //带背影滑动
});
});

效果图:

jquery------.resizable()的使用