效果如图:
image.png
image.png
需求:拖动左边盒子宽度,右边盒子宽度自适应
结尾附上此demo下载地址,附有需要的js文件及详细代码
1.引入jq和resizable插件js
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src=js/jquery.resizable.js></script>
2.上js代码:
$(function() {
var zwidth = $('.containers').width()*0.8
var zwidth2 = $('.containers').width()*0.2
var zwidth3 = $('.containers').width()*0.4
$( "#rowL" ).resizable({
handles : "e",
helper : true,
helperStyle : {
"border" : "1px solid #888"
},
maxWidth :zwidth,
minWidth : zwidth3,
onStopResize: function() {
$('#rowR').width($( ".containers" ).width()-$( "#rowL").width()-19)
},
});
})
image.png
3.css代码结构,样式部分就不详细写啦
<div class="containers">
<div class="rowL" id="rowL"></div>
<div class="rowR" id="rowR"></div>
</div>
这样子就实现了拖动左边盒子宽度,右边盒子自适应
具体的参数可以看下这里https://www.runoob.com/jeasyui/plugins-base-resizable.html,还有其他的参数
此文为自己开发总结,如有道友困惑,可来交流
demo下载地址链接：https://pan.baidu.com/s/1Bq8W3wWrdkucLDtslllxrg?pwd=fn90 提取码：fn90
