0
我有一個頁面有一個左div和右div。 div使用display:table和相關標籤進行組織。使用jquery-ui的可調整大小的工具可以調整正確的div大小。我希望能夠將分隔線拖動到左側和右側,並更改窗格的相對大小。如何製作左右面板,並能夠在它們之間滑動分隔線?
但這不太對。首先,右窗格只能通過其右邊緣和右下角來調整大小,而不能通過左邊緣進行調整。如何真的在這個js/html/css世界中製作分離器?
http://jsfiddle.net/rhedin/xhaxme4c/
<!DOCTYPE html>
<html lang="en" style="height:100%;width:100%;border:3px solid red">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
* {
box-sizing: border-box
}
</style>
</head>
<body style="height:100%;width:100%;border:3px solid blue;margin:0;padding:8px">
<div id="allBodyDiv" style="width:100%;height:100%;border:3px solid black;display:table">
<div id="leftWithinBodyDiv" style="border:3px solid blue;display:table-cell">
</div>
<div id="rightWithinBodyDiv" style="width:100px;border:3px solid red;display:table-cell">
</div>
</div>
<script>
$(function() {
$("#rightWithinBodyDiv").resizable({});
});
</script>
</body>
</html>
有趣!謝謝,羅伯特。我想在右邊的框中使用{handles:'w'}。與.position({my:'right',at:'right','#parentElement'})結合使用。直到您指出它時,我並不知道這些手柄:選項。 – user2171796
不客氣:) –
感謝您的幫助,羅伯特。 – user2171796