jQuery-UI是一個基于jQuery的Javascript庫，它提供了各種方便的工具和插件，幫助開發者快速簡便地設計和實現優秀的用戶界面。其中，布局組件是jQuery-UI中的一個重要部分，它為開發者提供了各種方便的布局方式，幫助開發者輕松建立出具有美觀和邏輯性的界面。

下面，看一個常見的布局實例：左側邊欄+右側主體，在jQuery-UI中可以使用兩個組件實現這個布局：resizable和draggable。其中，resizable可以用來使左側邊欄可調整大小，而draggable可以讓用戶通過拖拽左側邊欄改變整體布局。

這里是左側邊欄
這里是右側主體

上面的代碼使用了CSS中的float屬性，將左側邊欄向左浮動，右側主體向右浮動，從而實現了左右兩側的布局。接下來，需要使用一些JavaScript代碼來實現拖拽和調整大小的功能。

$(function() {
$( "#left-side" ).resizable({ 
minWidth: 100,
maxWidth: 400,
resize: function() {
$( "#right-side" ).css({
width: $(window).width() - $(this).width()
});
}
});
$( "#left-side" ).draggable({ 
containment: "#parent",
drag: function() {
$( "#right-side" ).css({
width: $(window).width() - $(this).width()
});
}
});
});

上面的JavaScript代碼使用了jQuery的匿名函數，在頁面加載時初始化resizable和draggable組件。在resizable的resize事件和draggable的drag事件中，使用了jQuery的css方法，實時計算右側主體的寬度，從而實現了左右兩側的實時同步。

總之，jQuery-UI布局組件提供了豐富的工具和組件，可以幫助開發者快速創建具有美觀和邏輯性的用戶界面。以上是一個簡單的左側邊欄+右側主體布局實例，但是在實際開發中，這個布局可以被擴展和改變以適應具體的需求。感興趣的讀者可以查閱jQuery-UI的文檔和示例，深入探究如何使用jQuery-UI布局組件實現更加復雜的用戶界面布局。