基于JQuery实现分隔条的功能

实现分隔条的功能可以通过JQuery中的UI组件Resizable实现，以下是具体的步骤：

引入JQuery和JQueryUI库

在head标签中引入JQuery和JQueryUI的库文件。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

添加HTML结构

在HTML中添加分隔条的结构，可以使用div等标签添加。

<div class="ui-widget-content">
  <div class="content" style="width: 50%;">
    <!-- 左侧内容 -->
  </div>
  <div class="separator"></div>
  <div class="content" style="width: 50%;">
    <!-- 右侧内容 -->
  </div>
</div>

这里我们添加了左右两个内容区域和一个分隔条，左右两个内容区域各占50%宽度。

添加CSS样式

在CSS中设置分隔条和内容区域的样式。

.separator {
  height: 100%;
  width: 0px;
  border-left: 1px solid gray;
  cursor: col-resize;
  margin: auto;
}

.content {
  display: inline-block;
  height: 400px;
  vertical-align: top;
}

.ui-widget-content {
  height: 400px;
  margin: 10px;
  padding: 10px;
  border: 1px solid gray;
  overflow: hidden;
}

分隔条设置了高度和宽度0，代表分隔条初始是不显示的，border-left代表分隔条是一个向左的一像素实线，通过设置cursor为col-resize指明分隔条可调整宽度。

添加JS代码

在JS中使用resizable()方法对分隔条进行设置。

$(function() {
  $(".separator").resizable({
    handles: "e",
    minwidth: 100,
    maxwidth: 700,
    resize: function(event, ui) {
      var remainingSpace = $(".ui-widget-content").width() - ui.element.outerWidth();
      var divTwo = ui.element.next();
      var proportion = Math.round(ui.element.outerWidth() / $(".ui-widget-content").width() * 100);
      ui.element.css({
        width: proportion + "%"
      });
      divTwo.css({
        width: remainingSpace + "px"
      });
    }
  });
});

resizable()方法可以让分隔条可拖拽。handles: "e"表示分隔条只能从东方向缩放，minwidth: 100和maxwidth: 700代表缩放的最小和最大宽度，resize方法是在分隔条被拖动时触发的回调函数，用于重新设置左右两个内容区域的宽度。

示例展示

下面给出一个完整的示例，你可以复制到本地html文件中看效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基于JQuery实现分隔条的功能</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <style type="text/css">
        .separator {
          height: 100%;
          width: 0px;
          border-left: 1px solid gray;
          cursor: col-resize;
          margin: auto;
        }

        .content {
          display: inline-block;
          height: 400px;
          vertical-align: top;
        }

        .ui-widget-content {
          height: 400px;
          margin: 10px;
          padding: 10px;
          border: 1px solid gray;
          overflow: hidden;
        }
    </style>

    <script type="text/javascript">
        $(function() {
          $(".separator").resizable({
            handles: "e",
            minwidth: 100,
            maxwidth: 700,
            resize: function(event, ui) {
              var remainingSpace = $(".ui-widget-content").width() - ui.element.outerWidth();
              var divTwo = ui.element.next();
              var proportion = Math.round(ui.element.outerWidth() / $(".ui-widget-content").width() * 100);
              ui.element.css({
                width: proportion + "%"
              });
              divTwo.css({
                width: remainingSpace + "px"
              });
            }
          });
        });
    </script>
</head>
<body>
    <div class="ui-widget-content">
      <div class="content" style="width: 50%;">
        左侧内容
      </div>
      <div class="separator"></div>
      <div class="content" style="width: 50%;">
        右侧内容
      </div>
    </div>
</body>
</html>

你可以试着改变minwidth、maxwidth，和proportion等值看看效果或者添加更多的内容区域，让内容自由宽度的相互之间变化。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JQuery实现分隔条的功能 - Python技术站