如何使用 jQuery 布局创建 "sidebar" 布局？

Question

我正在创建一个具有多个窗格的 Web 应用程序。以前用过一些Dojo，但是对于这个项目来说太重了，所以打算改用jQuery Layout。

但是，我喜欢 Dojo 的 BorderContainers 允许您使用 "sidebar" 设计的方式，其中东窗格和西窗格是全高，而不是默认的北窗格和南窗格是全宽。有没有办法通过 jQuery 布局来使用或模拟这种外观？

我试过将水平拆分布局嵌套在垂直拆分布局中，但布局添加了太多填充，看起来不正确：

当我设置 .ui-layout-pane { padding: 0 } 时，情况更糟：

但如果有更好的方法来删除填充，那也可能有效。

来源

`index.html`

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style/lib/jquery-layout/layout-default.css"/>
    <link rel="stylesheet" href="style/style.css"/>

    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/jquery-ui.min.js"></script>
    <script src="js/lib/jquery.layout.js"></script>
    <script src="js/main.js"></script>
  </head>

  <body>
    <div class="ui-layout-west"></div>
    <div class="ui-layout-center">
      <div class="ui-layout-center"></div>
      <div class="ui-layout-south"></div>
    </div>
  </body>
</html>

`style.css`

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body > .ui-layout-pane {
  padding: 0;
}

`main.js`

jQuery(function($) {
  $("body").layout({
    west: {
      size: "20%",
      minSize: "10%",
      maxSize: "50%",
    },
    center: {
    }
  });

  $("body > .ui-layout-center").layout({
    center: {
    },
    south: {
      size: "10%"
    }
  });
});

开发控制台样式

element.style {
    position: absolute;
    margin: 0px;
    left: 215px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 1137px;
    width: 837px;
    z-index: 0;
    display: block;
    visibility: visible;
    overflow: hidden;
}

body > .ui-layout-pane {
    padding: 0;
}

.ui-layout-pane {
    background: #FFF;
    border: 1px solid #BBB;
    padding: 10px;
    overflow: auto;
}

/* user agent stylesheet */

div {
    display: block;
}

/* Inherited from body.ui-layout-container */

body {
    font-family: Lucida Grande, Lucida Sans, Geneva, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: #EEE;
}

Answer 1

问题出在您的 CSS——特别是“>”运算符——它的意思是 "direct descendants of"，你猜怎么着，内部布局框架集不是直接后代。

改变

body > .ui-layout-pane {
    padding: 0;
}

至

body .ui-layout-pane {
    padding: 0;
}

（或完全不使用 "body"）它对你有用

查看工作example here

如何使用 jQuery 布局创建 "sidebar" 布局？

How do I create a "sidebar" layout with jQuery Layout?

jquery

jquery-ui

jquery-layout

来源

index.html

style.css

main.js

开发控制台样式

`index.html`

`style.css`

`main.js`