记jQuery-Resizable(缩放)[动态拖动元素宽度,调整窗格大小]

需求:左右两个盒子,左边盒子需要可拖动宽度,右边的盒子需要自适应宽度

如图:

结尾附上此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)
          },
        });
    })

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