最好的方法来做一个分割窗格在HTML中

有谁知道一个很好的技术,在HTML中创build一个可resize的分割窗格?

可以使用css / jquery / javascript来完成,还是有人知道他们使用的好的JavaScript库?

(一个分割窗格的例子是Internet Explorer中的collections夹,您可能已经停靠在主浏览器窗口的左侧)

当然,已经有很多的实现。 下面是一个: http : //layout.jquery-dev.net/在这里展示: http : //layout.jquery-dev.net/demos/simple.html

我想要一个香草,轻量级(jQuery UI布局权重在185kb),没有依赖选项(所有现有的库需要jQuery),所以我写了Split.js 。

它的权重小于2kb,不需要任何特殊的标记。 它支持旧的浏览器回到IE9(或带有polyfills的IE8)。 对于现代浏览器,您可以将其与Flexbox和网格布局结合使用。

这里是我的轻量级香草js方法,使用flexbox:

http://codepen.io/lingtalfi/pen/zoNeJp

testing成功在Chrome 54,Firefox 50,Safari 10,不知道其他浏览器。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.rawgit.com/lingtalfi/simpledrag/master/simpledrag.js"></script> <style type="text/css"> html, body { height: 100%; } .panes-container { display: flex; width: 100%; overflow: hidden; } .left-pane { width: 18%; background: #ccc; } .panes-separator { width: 2%; background: red; position: relative; cursor: col-resize; } .right-pane { flex: auto; background: #eee; } .panes-container, .panes-separator, .left-pane, .right-pane { margin: 0; padding: 0; height: 100%; } </style> </head> <body> <div class="panes-container"> <div class="left-pane" id="left-pane"> <p>I'm the left pane</p> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </div> <div class="panes-separator" id="panes-separator"></div> <div class="right-pane" id="right-pane"> <p>And I'm the right pane</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium at cum cupiditate dolorum, eius eum eveniet facilis illum maiores molestiae necessitatibus optio possimus sequi sunt, vel voluptate. Asperiores, voluptate! </p> </div> </div> <script> var leftPane = document.getElementById('left-pane'); var rightPane = document.getElementById('right-pane'); var paneSep = document.getElementById('panes-separator'); // The script below constrains the target to move horizontally between a left and a right virtual boundaries. // - the left limit is positioned at 10% of the screen width // - the right limit is positioned at 90% of the screen width var leftLimit = 10; var rightLimit = 90; paneSep.sdrag(function (el, pageX, startX, pageY, startY, fix) { fix.skipX = true; if (pageX < window.innerWidth * leftLimit / 100) { pageX = window.innerWidth * leftLimit / 100; fix.pageX = pageX; } if (pageX > window.innerWidth * rightLimit / 100) { pageX = window.innerWidth * rightLimit / 100; fix.pageX = pageX; } var cur = pageX / window.innerWidth * 100; if (cur < 0) { cur = 0; } if (cur > window.innerWidth) { cur = window.innerWidth; } var right = (100-cur-2); leftPane.style.width = cur + '%'; rightPane.style.width = right + '%'; }, null, 'horizontal'); </script> </body> </html> 

这个html代码取决于simpledrag vanilla js轻量级库(不到60行代码)。

在过去,你会使用框架来实现这一点。 这种方法不好,有几个原因。 请参阅Reece对帧为什么不好的回应。 另见雅各布·尼尔森( Jakob Nielson)的“ 为什么帧”(大部分时间)

一个更新的方法是使用内联框架。 这也有其优点和缺点: iframe是否被认为是“坏习惯”?

更好的方法是使用固定的定位 。 通过将导航内容(例如您的示例中的collections夹链接)放置在块元素(如div )中,然后应用position:fixed到该元素,并设置左侧,顶部和底部属性,如下所示:

 #myNav { position:fixed; left:0px; top:0px; bottom:0px; width:200px; } 

…您将实现页面左侧的垂直列,用户滚动页面时不会移动。

页面上的其余内容不会“感觉”这个nav元素的存在,所以它必须考虑到它所占用的200px的空间。 您可以通过将剩下的内容放在另一个div中并设置margin-left:200px;

您可以使用绝对定位。 例如,这个CSS将在页面的左侧停靠一个2em-bar:

 body { padding-left: 2.5em; } body > #bar { position:fixed; top:0; left:0; width: 2em; height: 100%; border-right: 2px solid #55F; background: #ddd; } 

( 在jsfiddle.net上演示 )

你有没有尝试Dave Methwin库, http: //methvin.com/splitter/

一个完全不同的方法是把东西放在网格中,比如ui-grid或者Kendo的网格,并且可以调整列的大小。 缺点是用户将无法调整行的大小,尽pipe行的大小可以通过编程来设置。

我发现工作分割器http://www.dreamchain.com/split-pane/与;jquery v1.9 。 注意我必须添加下面的CSS代码才能使用固定的bootstrap导航栏。

 fixed-left { position: absolute !important; /* to override relative */ height: auto !important; top: 55px; /* fixed navbar height */ bottom: 0px; } 

你可以使用JqueryUI而不用另一个JS库。 只需在.resizable resize事件中添加一个函数来调整其他div的宽度即可。

 $("#left_pane").resizable({ handles: 'e', // 'East' side of div draggable resize: function() { $("#right_pane").outerWidth( $("#container").innerWidth() - $("#left_pane").outerWidth() ); } }); 

这里是完整的JS小提琴 。

一个好的图书馆是Shield UI–你可以看看他们灵活的Splitter小部件和框架提供的其他强大组件。

嗯,我碰到CSS3这个属性。 这可能更容易使用。 https://www.w3schools.com/cssref/css3_pr_resize.asp