Question

我正在创建一个具有多个窗格的Web应用程序。我过去曾经使用过一些Dojo，但这个项目太重了，所以我打算改用jQuery Layout。

但是，我喜欢Dojo的BorderContainers允许你使用“侧边栏”设计的方式，其中东西窗格是全高，而不是全宽的默认南北窗格。有没有办法使用jQuery Layout来使用或模仿这个外观？

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

当我设置.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 - 尤其是＆＃34;＆gt;＆＃34;运算符 - 它意味着＆＃34;直接后代的＆＃34;，并猜测是什么，内部布局框架集不是直接后代。

更改

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

要

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

（或完全离开＆＃34;身体＆＃34;并且它会对你有用

见工作example here

如何使用jQuery Layout创建“侧边栏”布局？

来源

`index.html`

`style.css`

`main.js`

开发人员控制台样式

1 个答案: