Cách loại bỏ các lề trong bố cục jquery

Question

Tôi đang sử dụng jquery layout và tôi có một thời gian rất khó khăn để loại bỏ các lề trên các ô. Luôn luôn có một lề và không có số tiền của css sẽ loại bỏ chúng. Tôi đang triển khai bản demo đơn giản. simple demo Vì vậy, về cơ bản tôi muốn điều tương tự nhưng không có bất kỳ lề/đệm trên các tấm bên trong. Tôi sẽ điều chỉnh bản thân mình. Mục tiêu là để có thể đặt một hình nền trong đó trải dài từ biên giới đến biên giới.

Hy vọng tôi đủ rõ ràng.

Answer 1

Tôi nghĩ rằng quy tắc CSS sau đây có thể khắc phục vấn đề của bạn:

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

Đáng tiếc là nó trông giống như các plugin cửa sổ hiện rất nhiều vị trí tuyệt đối và do đó nó có khả năng kích thước của các container bây giờ sẽ được tắt bằng 20px mỗi. Bạn có thể viết một số jQuery để sửa lỗi đó, có thể:

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

... hoặc somesuch, nhưng ... yea, nó không lý tưởng. Bạn có thể muốn tìm một plugin khác hoặc sửa đổi nguồn của plugin này để giải thích sự khác biệt 20px ở kích thước của các ô.

Answer 2

Tôi đang sử dụng phiên bản Giao diện người dùng mới hơn so với khi O.P. tạo câu hỏi này, nhưng, tôi nghĩ tùy chọn ngăn này đã được khoảng một thời gian ngắn. Sau đây đã làm việc cho tôi, và không nên yêu cầu hack (thay vì cọ rửa nguồn/đọc tài liệu)

Thử thiết lập applyDefaultStyles thành false. (hoặc có thể bây giờ nó được gọi là applyDemoStyles)

Ví dụ:

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

hoặc

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

---

UPDATE:

FWIW - Tôi đang sử dụng complex layout - jquery.layout 1.3.0 - Release Candidate 30,79

Cụ , điều này đã làm việc cho cửa sổ cài đặt bên trong "thanh bên phía tây" của tôi. Đối với tôi, áp dụngDefaultStyles kiểm soát vùng đệm trắng không mong muốn cho ngăn tôi đang nhắm mục tiêu. Có nhiều cách khác nhau để khai báo cài đặt cho các ô khác nhau. Tôi đã sử dụng 'định dạng danh sách' trông giống như thế này ...

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