jquery 레이아웃에서 여백을 없애는 방법

Question

나는 jquery layout을 사용하고 있으며 창에 여백을 없애고 있습니다. 항상 여백이 있으며 CSS로 처리 할 수 ​​없습니다. 나는 간단한 데모를 구현하고있다. simple demo 기본적으로 나는 같은 것을 원하지만 안쪽 창에 여백/패딩이 필요하지 않습니다. 나는이 자아를 조정할 것이다. 목적은 국경에서 국경까지 펼쳐지는 배경 이미지를 그곳에 넣을 수있게하는 것입니다.

희망 충분합니다.

Answer 1

나는 다음과 같은 CSS 규칙이 문제가 해결 될 수 생각 :

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

불행하게도이 창 플러그인 모양을하는 절대 위치의 많은 그리고 그것은 용기의 가능성이 크기가 지금은 20 픽셀으로 해제 될 것입니다 마다. 참으로 이상적 아니다 ...

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

을 ... 또는 somesuch :하지만, 당신은 몇 가지 jQuery를 어쩌면, 그 문제를 해결하기 위해 작성할 수 있습니다. 다른 플러그인을 찾거나이 플러그인의 소스를 수정하여 창 크기 차이를 20px로 계산할 수 있습니다.

Answer 2

O.P.가이 질문을 만들었을 때보 다 최신 버전의 UI 레이아웃을 사용하고 있지만이 창 옵션은 잠시 동안 사용 된 것 같습니다. 다음은 저를 위해 일했으며 해킹이 필요하지 않습니다. (소스를 고치거나 문서를 읽는 것)

applyDefaultStyles를 false로 설정해보십시오. (또는 어쩌면 applyDemoStyles라고 부름)

예 :

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

또는

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

---

UPDATE :

FWIW - 30.79

특히 릴리스 후보 - jquery.layout 1.3.0 - 나는 complex layout 을 사용하고 있습니다 , 이것은 내 "서쪽 사이드 바"내부 설정 창에서 효과가있었습니다. 나를 위해, 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); 
});