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文件的引用!

转载于:https://www.cnblogs.com/aaa6818162/archive/2012/08/20/2647805.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401337.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言读取写入CSV文件 [二]进阶篇——写入CSV文件

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 本系列文章目录 [一] 基础篇 [二] 进阶篇——写入CSV [三] 进阶篇——读取CSV 什么是 包裹&#xff08;使用双引号&…

ABAP 数值四舍五入函数

DATA : dat TYPE p DECIMALS 9 VALUE 12.5445 ,dat1 TYPE p DECIMALS 9 .DATA dat2 TYPE p DECIMALS 9 VALUE 12.540.* 方法一 CALL FUNCTION HR_NZ_ROUNDING_DECIMALSEXPORTINGvalue_in datconv_dec 2 " 设置保留几位小数IMPO…

K8S中部署apisix(非ingress)

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 不使用pvc的方式在K8S中部署apisix-gateway 简介 因为公司项目准备重构&#xff0c;现在做技术储备&#xff0c;之前公司项…

MVC3 URL 数据绑定

从数据库中取出的Int类型的ID&#xff0c;在Razor视图中显示的链接地址格式为:http://localhost:1846/news/Detail/1 Router格式&#xff1a;{controller/action/id} 数据库中对应的字段为ID,对应的Action中的参数名也必须为ID 否则 编译器会报参数值为Null的错误。 当数据库中…

机器学习理论知识部分--偏差方差平衡(bias-variance tradeoff)

摘要&#xff1a; 1.常见问题 1.1 什么是偏差与方差&#xff1f; 1.2 为什么会产生过拟合&#xff0c;有哪些方法可以预防或克服过拟合&#xff1f; 2.模型选择例子 3.特征选择例子 4.特征工程与数据预处理例子 内容&#xff1a; 1.常见问题 1.1 什么是偏差与方差&#xff1f; …

MVC中获取模型属性的Range和StringLength验证特性设置

MVC中的客户端及服务端模型验证信息都以ModelMetadata类型作为承载&#xff0c;在获得属性的ModelMetadata之后&#xff08;还不知道怎么获取ModelMetadata的童鞋请自行恶补&#xff09;&#xff0c;我们可以轻松得到一些我们在模型中定义的特性&#xff0c;比如显示名称、是否…

有手就行3——持续集成环境—maven、tomcat、安装和配置

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 有手就行3——持续集成环境—maven、tomcat、安装 持续集成环境**(5)-Maven****安装和配置** 持续集成环境(6)-Tomcat安装…

隐藏Content-Location标头带的内部IP地址的执行语句以及其可能会带来的问题

用IIS发布的系统&#xff0c;利用各种检测工具&#xff0c;可以获取到页面的请求头的信息&#xff0c;里面会带有服务器IP等保密信息。 为了避免服务器IP地址等这种信息别的工具检测到&#xff0c;导致安全隐患。可以在CMD中执行以下语句&#xff1a; cscript c:\\inetpub\admi…

unity获取ugui上鼠标位置

public class GetMousePos : MonoBehaviour {public Canvas canvas;//画布private RectTransform rectTransform;//坐标void Start(){canvas GameObject.Find("Canvas").GetComponent<Canvas>();rectTransform canvas.transform as RectTransform; //也可以写…

netty框架

Netty 提供异步的、事件驱动的网络应用程序框架和工具&#xff0c;用以快速开发高性能、高可靠性的网络服务器和客户端程序。Netty是一个NIO客户端 服务端框架。允许快速简单的开发网络应用程序。例如&#xff1a;服务端和客户端之间的协议。它最棒的地方在于简化了网络编程规范…

stm32中stm32f10x_type.h(固件3.0以前)、stm32f10x.h(固件3.0以后)、stdint.h文件的关系

在stm32f10x的3.5固件库中stm32f10x.h有以下代码&#xff08;第478行开始&#xff09;&#xff1a; /*** }*/#include "core_cm3.h" #include "system_stm32f10x.h" #include <stdint.h>/** addtogroup Exported_types* {*/ /*!< STM32F10x Stan…

.netcore基础知识(一)

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 先来说说web服务器 先来一张图 一个典型的进程外托管模型 我们先看kestrel这一部分 我们在它前面放了一个方向代理服务器n…

内存墙,多核CPU的终结者?

原文地址&#xff1a;http://www.ed-china.com/ART_8800045174_400004_500008_OT_8f4eb612.HTM 多核处理器是当今计算领域的主导&#xff0c;而多核芯片则遍布从苹果的iPad到富士通K超级计算机的各种平台。2005年&#xff0c;由于功耗将单核CPU的时钟速度限制在3GHz&#xff0c…

BZOJ 1791 岛屿(环套树+单调队列DP)

题目实际上是求环套树森林中每个环套树的直径。 对于环套树的直径&#xff0c;可以先找到这个环套树上面的环。然后把环上的每一点都到达的外向树上的最远距离作为这个点的权值。 那么直径一定就是从环上的某个点开始&#xff0c;某个点结束的。 把环拆成链&#xff0c;定义dp[…

什么是SAS

什么是SAS&#xff1f;简单的说&#xff0c;SAS是一种磁盘连接技术。它综合了现有并行SCSI和串行连接技术&#xff08;光纤通道、SSA、IEEE1394及InfiniBand等&#xff09;的优势&#xff0c;以串行通讯为协议基础架构&#xff0c;采用SCSI-3扩展指令集并兼容SATA设备&#xff…

C语言编程规范--常用缩写词

常用缩写词 缩 写 全 称 a addr address admin / adm administrator app application arg argument asm assemble asyn asynchronization avg average b bg background bk back bmp bitmap brk break btn button buf buffer c calc calculate ch…

netty系列之:JVM中的Reference count原来netty中也有

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 目录* 简介 ByteBuf和ReferenceCountedByteBuf的基本使用ByteBuf的回收ByteBuf的衍生方法ChannelHandler中的引用计数内存泄…

hdu区域赛在线热身赛 暨 第十二场组队赛

题目编号&#xff1a;hdu 4257~4266 (对应比赛题号1001~1010) 这是我们第十二场组队赛&#xff0c;在今天中午进行。 比赛刚开始&#xff0c;依然是由我的队友读题。还没看几题&#xff0c;就发现了好多题judge时长高达20秒&#xff0c;这真的有点给我们心理造成压力。不过&…

powerdesign相关

1.安装程序和汉化放百度云了 2.打印错误处理 http://jingyan.baidu.com/article/c45ad29cd84e4b051753e2c3.html 3.导出sql http://jingyan.baidu.com/article/7082dc1c48960ee40a89bd38.html 4.name和comment同步 http://blog.csdn.net/steveguoshao/article/details/16940347…

游戏名词

BUFF,DEBUFF: 增益状态&#xff0c;包括自己或者队友施加的&#xff0c;例如骑士的祝福&#xff0c;牧师的耐力精神&#xff0c;小德的爪子DEBUFF就是减益状态&#xff0c;例如你PK的时候法师的寒冰箭减速&#xff0c;盗贼的毒药&#xff0c;SS的腐蚀等等NPC&#xff1a; NPC就…