<div class=”message” >
<div class=”header”>
<div>延迟调整</div>
<span>×</span></div>
<div class=”area”>拖动最外边框查看效果，参数如下<br/>
时间延迟：500<br/>
距离延迟：20</div>
</div>
</div>
</body>
</html>
3：动态调整效果
需要借助尺寸调整组件的一下属性来实现：
*为helper属性设置一个CSS样式类，该样式类将在调整过程中显示元素大小的轮廓，操作结束后才调整原始元素的大小
*设置ghost属性为true，在调整过程中显示一个半透明的辅助元素
*将animate属性设置为true，为元素的调整过程添加动画效果
*为animateDuration属性指定一个值，设置动画过程持续的时间
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>resizable组件</title>
<script language=”javascript” src=”js/jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.core.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.widget.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.mouse.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.resizable.js”></script>
<style type=”text/css”>
@charset “utf-8”;
/* CSS Document */
body {
margin:0;
padding:0;
font-size:14px
}
.content {
margin-left:10px;
line-height:24px;
}
#wrap {
margin: 20px auto 10px auto;
width: 390px;
background: #fff;
padding: 10px;
border: 5px solid #000;
text-align: left;
}
h1 {
color:#006;
font-size:24px;
font-weight:bold;
text-align:center;
margin-bottom:0px;
}
h2 {
font-size:12px;
text-align:center;
font-weight:normal;
border-top:#ccc 1px dashed;
color:#666;
height:24px;
margin:3px 5px 8px 0;
background:#f5f5f5
}
p {
text-indent: 20px;
}
.ui-resizable-helper {
border: 2px dashed #600;
}
</style>
