JQueryUI--Resizable()---为拖动层添加右下角的拖动图标

主要是利用Resizable 的helper属性:官方的解释为:一个CSS类,当调整元素大小时,将被添加到辅助元素中,一但调整结束则恢复正常。默认值  false

经过这次的实验,我的理解是:它就是一个样式,用于在拖动时右下角所显示的样式

1、 首先声明一个样式,即右下角的那个图标的样式

.handler
{
	width:12px;
	height:15px;
	background-image:url("images/adminbar.gif");
	position:absolute;
	right:1px;
	bottom:1px;
	cursor:nw-resize;
}

2、 然后body部分的代码如下

<body>
<div id="main">
	<div class="member">
		<div>姓名</div><input type="text"/><br>
		<div>用户名</div><input type="text"/><br>
		<span>密码:</span><input type="password"/><br>
		<input type="submit" value="提交"/> <input type="button" value="取消"/><br>
		<div class="handler"></div>
	</div>
</div>
</body>

为了能让拖动时在指定范围内拖动,我们再声明一个#main样式,还有member的样式

#main{
	border:1px dotted #ff0000;
	width:600px;
	height:600px;
}
.member{
	width:200px;
	height:150px;
	background-color:#ff00ff;
}

最后是JS代码

<script type="text/javascript">
	$().ready(function(){
		$(".member").resizable({handler: '.handler'}).draggable({containment:'#main'});	
	})
</script>

最终的效果为:

JQueryUI--Resizable()---为拖动层添加右下角的拖动图标_第1张图片

本文源码下载地址:http://download.csdn.net/detail/harvic880925/4961990

转载请标明出处,谢谢!


你可能感兴趣的:(JQueryUI--Resizable()---为拖动层添加右下角的拖动图标)