如何摆脱jquery布局中的边距

Question

我正在使用jquery layout，我很难摆脱窗格上的边距。总是有一个边距，没有多少 CSS 可以摆脱它们。我正在实现简单的演示。simple demo 所以基本上我想要同样的东西，但内部窗格上没有任何边距/填充。我会自己调整这些。目标是能够在其中放置一个从边界延伸到边界的背景图像。

希望我足够清楚。

Answer 1

我使用的是比 O.P. 创建此问题时更新版本的 UI 布局，但是，我认为此窗格选项已经存在了一段时间。以下内容对我有用，不需要破解（而是搜索源代码/阅读文档）

尝试将 applyDefaultStyles 设置为 false。 （或者现在它被称为 applyDemoStyles）

例如

$("body").layout({applyDefaultStyles:false});

或

$("body").layout({applyDemoStyles:false});

---

更新：

FWIW - 我正在使用complex layout -- jquery.layout 1.3.0 - 候选版本 30.79

具体来说，这适用于我的“西边栏”内部设置窗格。 对我来说，applyDefaultStyles 控制了我所针对的窗格的不需要的白色填充。 有不同的方法来声明不同窗格的设置。 我使用了看起来像这样的“列表格式”...

//'list format'
westSidebarSettings_Inner = {
  applyDefaultStyles: false  // basic styling for testing & demo purposes
  , // (other settings ommitted in this stackoverflow snippet for brevity)
}

//'sub-key format'
var layoutSettings_Outer = {
  name: "outerLayout" 
  // options.defaults apply to ALL PANES - but overridden by pane-specific settings
 , defaults: {
    size: "auto"
    , minSize: 50
    , paneClass: "pane"         // default = 'ui-layout-pane'
    , resizerClass: "resizer"   // default = 'ui-layout-resizer'
    , togglerClass: "toggler"   // default = 'ui-layout-toggler'
    , buttonClass: "button" // default = 'ui-layout-button'
  }
 , north: {
    spacing_open: 21                // cosmetic spacing
    , togglerLength_open: 21        // to HIDE the toggler button, set = 0
    , togglerLength_closed: 21      // "100%" OR -1 = full width of pane
  }
}


$(document).ready(function () {
  // create the OUTER LAYOUT
  outerLayout = $("body").layout(layoutSettings_Outer);

  // create an INNER LAYOUT to split my west sidebar into 2 pieces 
  // (actual settings ommitted in this stackoverflow snippet for brevity)
  innerLayout = $(outerLayout.options.west.paneSelector).layout(westSidebarSettings_Inner);
});

Answer 2

我认为以下 CSS 规则可能会解决您的问题：

.ui-layout-pane {
  padding: 0px !important;
}

不幸的是，窗格插件看起来做了很多绝对定位，所以现在容器的大小可能会相差 20px。你可以写一些 jQuery 来解决这个问题，也许：

jQuery('.ui-layout-pane').each( function() {
  var el = jQuery(this);
  el.width( el.width() + 20 );
} );

...或类似的东西，但是...是的，这并不理想。您可能需要寻找其他插件或修改此插件的来源以解决窗格大小的 20 像素差异。