使用三个div调整大小的jQuery不起作用

时间：2018-08-05 07:08:37

标签： javascript jquery html css

我为我的一个项目使用了可调整大小的Jquery。我想要三个div并排两个分隔符，并相应地调整每个分隔符的大小。我能够无问题地调整前两个div的大小。但是我不能去做第三个。

还有一个问题是，当您移动拆分器时，它也会同时移动最后一个拆分器和div。

JSFiddle 

 $(".panel-left").resizable({
   handleSelector: ".splitter",
   resizeHeight: false
 });
 
  $(".panel-right").resizable({
   handleSelector: ".splitter-right",
   resizeHeight: false
 });
html,
body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.page-container {
  margin: 20px;
}

/* horizontal panel*/

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  /* avoid browser level touch actions */
  xtouch-action: none;
}

.panel-left {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 10px;
  width: 300px;
  min-height: 200px;
  min-width: 150px;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.splitter {
  flex: 0 0 auto;
  width: 18px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;
}

.splitter-right {
  flex: 0 0 auto;
  width: 18px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;
}

.panel-center {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  width: 100%;
  min-height: 200px;
  min-width: 200px;
  background: #eee;
}

.panel-right {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  width: 100%;
  min-height: 200px;
  min-width: 200px;
  background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

<div class="page-container">
  <div class="panel-container">

    <div class="panel-left">
      left panel
    </div>

    <div class="splitter">
    </div>

    <div class="panel-center">
      center panel
    </div>
    
    <div class="splitter-right">
    </div>
    
    <div class="panel-right">
      center panel
    </div>


  </div>


</div>

2 个答案:

答案 0 :(得分：0)

这是工作代码：

 $(".panel-left").resizable({
   handleSelector: ".splitter",
   resizeHeight: false
 });
 
  $(".panel-right").resizable({
   handleSelector: ".splitter-right",
   resizeHeight: false
 });
html,
body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.page-container {
  margin: 20px;
}

/* horizontal panel*/

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  /* avoid browser level touch actions */
  xtouch-action: none;
}

.panel-left {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 10px;
  width: 30%;
  min-height: 200px;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.splitter {
  flex: 0 0 auto;
  width: 5%;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;
}

.splitter-right {
  flex: 0 0 auto;
  width: 5%;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;
}

.panel-center {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  width: 30%;
  min-height: 200px;
  background: #eee;
}

.panel-right {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  width: 30%;
  min-height: 200px;
  background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

<div class="page-container">
  <div class="panel-container">

    <div class="panel-left">
      left panel
    </div>

    <div class="splitter">
    </div>

    <div class="panel-center">
      center panel
    </div>
    
    <div class="splitter-right">
    </div>
    
    <div class="panel-right">
      right panel
    </div>


  </div>


</div>

您的错误：

您给left-panel设置了静态宽度，然后给了min-width，它覆盖了width属性，之后又给两个{{ 1}}和width:100%，使用display flex将该页面使用的总宽度用作

100％+ 100％+ 300px + 18px + 18px（您的分隔线宽度）

答案 1 :(得分：0)

水平三个面板的正确答案包括

  1. 调整 panel-center 的大小，而不是右面板
  2. 将其 flex-shrink设置为0 

    $(".panel-left").resizable({
        handleSelector: ".splitter",
        resizeHeight: false
    });
	
    $(".panel-center").resizable({
        handleSelector: ".splitter-right",
        resizeHeight: false
    });
html,
body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.page-container {
  margin: 20px;
}



/* horizontal panel*/

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;

  /* avoid browser level touch actions */
  xtouch-action: none;
}

.panel-left {
  flex: 0 0 auto;  /* only manually resize */
  padding: 10px;
  width: 150px;
  min-height: 200px;
  min-width: 150px;
  white-space: nowrap;
  background: #838383;
  color: #ffffff;
}

.splitter,
.splitter-right {
  flex: 0 0 auto;
  width: 18px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;
}

.panel-center{
  flex: 1 0 auto;
  padding: 10px;
  width: 30%;
  min-height: 200px;
  min-width: 200px;
  background: #eee;
  color: #000;
}

.panel-right {
  flex: 0 0 auto;  /* only manually resize */
  padding: 10px;
  width: 30%;
  min-height: 200px;
  min-width: 200px;
  background: #838383;
  color: #ffffff;
}  
}
<html>
<head>
    <title>Simple Split Panels - jquery-resizable</title>
    <meta charset="utf-8"/>
</head>
<body style="">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
    <div class="page-container">

        <div class="panel-container">

            <div class="panel-left">
                left panel
            </div>

            <div class="splitter"></div>

            <div class="panel-center">
                center panel
            </div>

            <div class="splitter-right"></div>

            <div class="panel-right">
                right panel
            </div>
        </div>
	</div>
</body>
</html>

相关问题
最新问题