Question

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

希望我足够清楚。

Answer 1

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

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

不幸的是，看起来窗格插件做了很多绝对定位，因此容器的大小现在可能会减少20px。您可以编写一些jQuery来修复它，可能：

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

......或者其他一些，但是......是的，这并不理想。您可能希望查找不同的插件或修改此插件的来源，以解决窗格大小中20px的差异。

Answer 2

我使用的新版UI布局比O.P.创建此问题时更新，但是，我觉得这个窗格选项已经存在了一段时间。以下对我有用，不应该要求黑客攻击（而是搜索源/阅读文档）

尝试将applyDefaultStyles设置为false。（或者现在可能叫做applyDemoStyles）

E.g。

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

或

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

更新：

FWIW - 我正在使用complex layout - jquery.layout 1.3.0 - Release Candidate 30.79

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

//'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);
});

如何摆脱jquery布局中的边距

2 个答案: