(本文初创于2014-10-11)
jQueryUI确实是很方便的前端UI控件,本文只介绍一些resizable功能的使用心得。
官网地址:http://jqueryui.com/resizable/
功能的需求是,在一个列表页面,点击某一条记录的时候,页面的右侧弹出Div显示这条记录的详情,Div高度与页面高度一致,位置固定(就是一个position:fixed;overflow:scroll;的Div),且要可手动拖动改变大小。
问题1:Div固定在页面右侧,resize时Div会跑到左边
我的Div样式大致是这样:
position:fixed;float:right;right:10px;width:500px;height:900px;
resizable初始化:
$( "#resizable" ).resizable({ handles: "w" });
1.在Div上增加left:xxpx;属性,这样Div左border拉伸时Div位置会保持不变。
2.在resizable的resize事件上做操作
$( "#resizable" ).resizable({ handles: "w" , resize: function(event, ui) { $("#resizable").css("left", ""); } });
resizable在resize时会计算Div的位置,这种方法是resize时去掉产生的left属性,这样也能达到Div位置不改变的效果。
方法1比较简单,但是我的情况肯定不行,在许多场景下,left也都是不固定的,所以我使用的是第二种。
问题2:当Div有滚动条时的异常
有时Div中会显示大量的信息,会需要滚动条,这很正常。但是resizable似乎不太喜欢滚动条,初始化之后,滚动条下拉一段,则新出现的Div左边缘不支持resize了。调试发现,resizable初始化的时候,在Div左border上会生成一个用于handle的div,鼠标选中此处区域进行拖拉,达到Div resize的效果。这个handle div的高度与最初Div的高度一致,但是滚动条下拉之后,这个handle div被滚动到上面了,新出现的左border上并没有handle div,自然也就不能resize了。了解到这个原因后,处理方法也很明了了。
解决方法.在Div外面嵌套一个div,外层div的大小固定且无滚动条,内层Div有滚动条,对外层div进行resizable,这样在下拉滚动条时,移动的是内层Div的滚动条,外层div的左border是保持不动的,自然也不会有问题2了。
当然也可以对handle div进行修改,让它位置不随滚动条改变。这个方法理论上可行,但我没试过,毕竟嵌套div的办法已经非常简易了。
问题3:定制可拖动区域,比如放到Div外面
resizable本身支持8拉伸方向,w,e,s,n,ws,wn,es,en,对应4个方向和Div的4个脚。在四个方向上,可以在border上拉伸,在4个脚上,则是在Div的角落里生成一个小三角。
经常会有需求,定制可拖动区域(即handle div),放到Div内部另一个元素上,或者到Div外面。jquery resizable提供了定制handle div的方法,但是对于Div外部是无效的(原谅我没有测试放在Div内部行不行……)。
resizable相关的样式有:.ui-resizable-handle,.ui-resizable-w,.ui-resizable-e,.ui-resizable-s,等等,.ui-resizable-handle是可拖动区域的样式,.ui-resizable-w等就是区域的位置。直接在css文件里修改上述样式就可以达到预期效果。
比如:
.ui-resizable-handle { width: 30px; height: 30px; background-color: #ffffff; border: 1px solid #000000; } .ui-resizable-w { left:-50px; top:50%; }