JQuery UI.Layout使用

前二週用了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 了

最後.....轉圈...灑花.....