Asp.net WebForm中应用Jquery EasyUI Layout
生活随笔
收集整理的這篇文章主要介紹了
Asp.net WebForm中应用Jquery EasyUI Layout
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Asp.net WebForm中應用Jquery EasyUI Layout
按照EasyUI文檔中的示例，編寫layout代碼：
<body class=”easyui-layout”>
??????? <div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
??? <div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
??? <div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
??? <div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
??? <div region="center" title="Main Title">
??? </div>
? </body>
在普通的HTML頁面中可以得到一個根據窗口大小自動調整的一個布局，可是放到Asp.net(.net 4)的webform中就會出錯：
<body class=”easyui-layout”>
<form id="form1" runat="server">
??????? <div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
??? <div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
??? <div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
??? <div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
??? <div region="center" title="Main Title">
??? </div>
</form>
? </body>
運行時顯示“nodename為空或不是對象”
跟蹤調試發現 是因為定義布局的幾個DIV不是class定義為“easyui-layout”的元素的直接子對象。
于是將定義修改如下：
<form id="form1" runat="server" class=”easyui-layout”>
可是發現布局不能顯示，繼續研究發現是上面的form元素沒有定義絕對的寬度所至，如果想下面這樣定義就可以得到布局：
<form id="form1" runat="server" class=”easyui-layout”
style="width:600px;height:400px;">可是這樣得到的是一個固定大小的布局，不能夠隨著窗口大小改變尺寸。于是想到利用resize事件增加腳本：<script type="text/javascript">
???????
$(function () {
??????????? windowResize();
??????????? $(window).resize(function () {
??????????????? windowResize();
??????????? });
??????? });
??????? function getWindowHeight() {
??????????? return $(window).height();
??????? }
??????? function getWindowWidth() {
??????????? return $(window).width();
??????? }
??????? function windowResize() {
??????????? var width = getWindowWidth();
??????????? var height = getWindowHeight();
??????????? $('form#form1').width(width);
??????????? $('form#form1').height(height);
??????????? $('form#form1').layout();
??????? }
??? </script>
?
<style type="text/css">
??? body
??? {
??????? padding:0px;
??????? margin:0px;
??? }
??? </style>
</head>
<body >
??? <form id="form1" runat="server">
??? <div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
??? <div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
??? <div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
??? <div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
??? <div region="center" title="Main Title">
??? </div>
??? </form>
</body>
原來考慮將resize事件寫成一個獨立的函數，然后在$(window).resize(fn)中注冊，可是發現這樣一來，函數只會在窗體第一次裝入時執行一次，以后不論怎么改變窗口都不會再觸發事件，而直接將函數寫在resize（）中，那么窗體裝載時又不執行！在IE、FireFox、Chorm中都是這樣，無奈只好這樣寫了！
通過上面的代碼能夠得到一個可以自適應窗口大小的布局！
ps:別忘了在<head>中加上必要的js文件和CSS文件的引用！
按照EasyUI文檔中的示例，編寫layout代碼：
<body class=”easyui-layout”>
??????? <div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
??? <div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
??? <div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
??? <div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
??? <div region="center" title="Main Title">
??? </div>
? </body>
在普通的HTML頁面中可以得到一個根據窗口大小自動調整的一個布局，可是放到Asp.net(.net 4)的webform中就會出錯：
<body class=”easyui-layout”>
<form id="form1" runat="server">
??????? <div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
??? <div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
??? <div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
??? <div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
??? <div region="center" title="Main Title">
??? </div>
</form>
? </body>
運行時顯示“nodename為空或不是對象”
跟蹤調試發現 是因為定義布局的幾個DIV不是class定義為“easyui-layout”的元素的直接子對象。
于是將定義修改如下：
<form id="form1" runat="server" class=”easyui-layout”>
可是發現布局不能顯示，繼續研究發現是上面的form元素沒有定義絕對的寬度所至，如果想下面這樣定義就可以得到布局：
<form id="form1" runat="server" class=”easyui-layout”
style="width:600px;height:400px;">可是這樣得到的是一個固定大小的布局，不能夠隨著窗口大小改變尺寸。于是想到利用resize事件增加腳本：<script type="text/javascript">
???????
$(function () {
??????????? windowResize();
??????????? $(window).resize(function () {
??????????????? windowResize();
??????????? });
??????? });
??????? function getWindowHeight() {
??????????? return $(window).height();
??????? }
??????? function getWindowWidth() {
??????????? return $(window).width();
??????? }
??????? function windowResize() {
??????????? var width = getWindowWidth();
??????????? var height = getWindowHeight();
??????????? $('form#form1').width(width);
??????????? $('form#form1').height(height);
??????????? $('form#form1').layout();
??????? }
??? </script>
?
<style type="text/css">
??? body
??? {
??????? padding:0px;
??????? margin:0px;
??? }
??? </style>
</head>
<body >
??? <form id="form1" runat="server">
??? <div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
??? <div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
??? <div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
??? <div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
??? <div region="center" title="Main Title">
??? </div>
??? </form>
</body>
原來考慮將resize事件寫成一個獨立的函數，然后在$(window).resize(fn)中注冊，可是發現這樣一來，函數只會在窗體第一次裝入時執行一次，以后不論怎么改變窗口都不會再觸發事件，而直接將函數寫在resize（）中，那么窗體裝載時又不執行！在IE、FireFox、Chorm中都是這樣，無奈只好這樣寫了！
通過上面的代碼能夠得到一個可以自適應窗口大小的布局！
ps:別忘了在<head>中加上必要的js文件和CSS文件的引用！
轉載于:https://www.cnblogs.com/aaa6818162/archive/2012/08/20/2647805.html
總結
以上是生活随笔為你收集整理的Asp.net WebForm中应用Jquery EasyUI Layout的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PHP起点 - 运算符
- 下一篇： MVC3 URL 数据绑定