前二週用了JQuery UI做了一個project 的demo,效果不錯.
另外,也想要讓網頁中的物件可自動隨著螢幕大小resize,之前同事自已寫了一個javascript function,雖然效果不錯,但有時在某些頁面時仍得要再呼叫一次resize
但有時版面總不如意啊.  所以想使用
JQuery UI.Layout這個plug-in看看
試了幾天,雖然有 
文件參考  ,但也搞得我七葷八素的, 有些方法或屬性是有看沒有懂..(汗....)
測了好幾天 後,總算抓到了一些撇步了
先建一個Website Application, 原則上Visual Studio 2010會幫你建一個看起來UI效果還不錯的網站.
先在Site.Master.aspx中加入jquery-1.6.min.js、jquery.layout-latest.js、layout-default-latest.css等檔案的參考, 然後加入這段 script
<script type="text/javascript">
        var myLayout;
        $(document).ready(function () {
            //先設定大小再凍結resizer bar
            myLayout = $('body').layout({ applyDefaultStyles: true
                                             , north__closable: false
                                             , north__pane_spacing: 0
                                             , north__resizable: false  
            });
           //這個是想要讓header預設不要出現scrollbar,如果不設,下拉功能選單會出不來
          //和直接設定north__showOverflowOnHover:    true的效果又不一樣
          //且讓asp:menu選單下拉時的z-index在最上面
          //如果把這行拿掉,menu就被蓋在下面都出不來了....
            myLayout.allowOverflow('north'); 
        }); 
</script>
上面紅字那段try了二天二夜....真是血淚(哭....)
如果要override pane的css屬性,
可以直接在Site.css加入以下..
 .ui-layout-pane-north {
     border: 0 !important; 
     padding:0 !important; 
     margin-bottom:0 !important; 
     background: none !important; 
}
.ui-layout-pane-center { 
     border: 0 !important; 
     padding:0 !important; 
     margin-bottom:0 !important; 
     background: none !important; 
}
然後在body中放二個div tag
先放
 <div class="ui-layout-center">  
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />  
</div>
再放
<div class="ui-layout-north">
        <div class="header">
            <div class="title">
              .........
            </div>
            <div class="loginDisplay">
             ............
             </div>
        </div>
        <div class="clear hideSkiplink"> 
                <asp:Menu ID="Menu1" runat="server" CssClass="menu" EnableViewState="False" DataSourceID="SiteMapDataSource1"
                    Orientation="Horizontal" StaticSubMenuIndent="16px" OnMenuItemDataBound="Menu1_MenuItemDataBound">
                    <StaticMenuItemStyle HorizontalPadding="20px" VerticalPadding="5px" />
                    <DynamicMenuStyle CssClass="adjustedZIndex" />
                </asp:Menu>
            </div> 
< /div>
更多的說明及用法可以好好參考
 demo site 
做好框架後, 加入幾個頁面,測試了放了updatepanel ,gridview, reportviewer(rdlc), jquery ui accordin及dialog的效果
看來都很完美....
要注意的是reportviewer設置要如下
 <rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="100%" Height="100%"  SizeToReportContent="true" >
    </rsweb:ReportViewer> 
width和height有沒有設100%好像沒關係, 但
SizeToReportContent是一定要設的,這樣就會依螢幕大小自已resize 了
最後.....轉圈...灑花.....