前二週用了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 了
最後.....轉圈...灑花.....