效果如圖:
image.png
image.png
需求:拖動(dòng)左邊盒子寬度,右邊盒子寬度自適應(yīng)
結(jié)尾附上此demo下載地址,附有需要的js文件及詳細(xì)代碼
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代碼結(jié)構(gòu),樣式部分就不詳細(xì)寫啦
<div class="containers">
<div class="rowL" id="rowL"></div>
<div class="rowR" id="rowR"></div>
</div>
這樣子就實(shí)現(xiàn)了拖動(dòng)左邊盒子寬度,右邊盒子自適應(yīng)
具體的參數(shù)可以看下這里https://www.runoob.com/jeasyui/plugins-base-resizable.html,還有其他的參數(shù)
此文為自己開(kāi)發(fā)總結(jié),如有道友困惑,可來(lái)交流
demo下載地址鏈接：https://pan.baidu.com/s/1Bq8W3wWrdkucLDtslllxrg?pwd=fn90 提取碼：fn90
