如何擺脫jQuery佈局的邊距

Question

我正在使用jquery layout，我很難擺脫窗格邊距。總是有一個保證金，沒有多少css會擺脫它們。我正在實施簡單的演示。 simple demo 所以基本上我想要同樣的東西，但沒有任何邊距/內部窗格填充。我會調整這些我的自我。目標是能夠在背景圖像中放置從邊界延伸到邊界的圖像。

希望我很清楚。

Answer 1

我認爲下面的CSS規則可以解決您的問題：

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

不幸的是，它看起來像窗格插件做了很多的絕對定位，所以它的容器有可能的大小現在將20像素被關閉每。你可以寫一些jQuery來解決這個問題，也許：

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

...或者諸如此類，但......是啊，它的效果並不理想。你可能想要尋找一個不同的插件或者修改這個插件的來源來解決窗格大小的20px差異。

Answer 2

我使用的是比O.P.創建這個問題更新版本的UI佈局，但是，我認爲這個窗格選項已經存在一段時間了。以下爲我工作，並且不應該要求黑客（而是沖刷源/閱讀文檔）

嘗試將applyDefaultStyles設置爲false。 （或者現在叫做applyDemoStyles）

例如，

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

或

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

---

UPDATE：

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