`
elfasd
  • 浏览: 100465 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

easyui layout使用问题

    博客分类：
  • JS
easyuijqueryjsw 
阅读更多

easyui layout使用问题

在做一个easyui layout的demo的时候，遇到一个问题，就是不断该表窗口大小的时候有时候会报错：无效的参数

定位了一下，发现是jquery-1.8.0.js中有这么一行报错：

 

        f[b] = d;

f[b]接收的应该是 数字  +  px，但是d是NaN   +  px，这样就报错了

 

 

这个d是从最开始的jquery文件function (A, w)中的w赋值过来的，打个debugger端点发现这个w就是个undefined，搞不懂了，是浏览器问题？

暂时加了一个判断应付了事，但是有人遇到过这样的问题么？解决方案呢？：

if(d==='NaNpx'){
      
     //do nothing  
       }else {
        f[b] = d;
       }

 下面是这个demo的界面：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
 <link rel="stylesheet" type="text/css" href="${path}/js/com/nari/component/easyui/themes/default/easyui.css"> 
 <link rel="stylesheet" type="text/css" href="${path}/js/com/nari/component/easyui/themes/icon.css"> 
 <link rel="stylesheet" type="text/css" href="${path}/js/com/nari/component/easyui/demo.css"> 
 <script type="text/javascript" src="${path}/js/com/nari/component/easyui/jquery.min.js"></script> 
 <script type="text/javascript" src="${path}/js/com/nari/component/easyui/jquery.easyui.min.js"></script> 
 <script type="text/javascript" src="${path}/js/com/nari/component/easyui/locale/easyui-lang-zh_CN.js"></script> 
 <meta http-equiv="Content-Type" content="text/html; charset=GBK">
 <title>tbUser初始化查询页面</title>
     <style type="text/css">
  body {
   margin:0px;
   padding:0px;
   width:100%;
   height:100%;
  }
 </style>
 <script>
  var settime = null;
  function redraw(){
   $('#wrap').layout('resize'); 
   $('#subWrap').layout('panel', 'north').panel('resize',{width:$('#subWrap').width()});
   $('#subWrap').layout('panel', 'center').panel('resize',{width:$('#subWrap').width()});
   $('#subWrap').layout('resize');
  }
  $(function(){  
   $(window).resize(function(){
    if(settime != null)
     clearTimeout(settime);
    settime=setTimeout("redraw()",100);
   });     
   var p1 = $('body').layout('panel','west').panel({
    onCollapse:function(){
     if(settime != null)
      clearTimeout(settime);
     settime=setTimeout("redraw()",100);
    },
    onExpand:function(){
     if(settime != null)
      clearTimeout(settime);
     settime=setTimeout("redraw()",100);
    },
    onResize:function(width,height){
     if(settime != null)
      clearTimeout(settime);
     settime=setTimeout("redraw()",100);
    }
   });    
   var p2 = $('body').layout('panel','east').panel({
    onCollapse:function(){
     if(settime != null)
      clearTimeout(settime);
     settime=setTimeout("redraw()",100);
    },
    onExpand:function(){
     if(settime != null)
      clearTimeout(settime);
     settime=setTimeout("redraw()",100);
    },
    onResize:function(width,height){
     if(settime != null)
      clearTimeout(settime);
     settime=setTimeout("redraw()",100);
    }
   }); 
  });
 </script>
</head>
<body>
 <body class="easyui-layout">
 <div region="north" border="false" style="height:30px;background:#B3DFDA;">north region</div>
 <div region="west" split="true" title="tree" 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:20px;background:#A9FACD;">south region</div>
 <div region="center" border="true" title="center" style="border-left:0px;border-right:0px;">  
  <div class="easyui-layout" id="subWrap" style="width:100%;height:100%;background:#0A3DA4;">
   <div region="north" border="true" title="condtion" split="true" style="height:200px;background:#A9FACD;">
    <p style="font-size:48;margin:0px auto;text-align:center;">sub north region</p>
   </div>
   <div region="center" border="true" title="result" split="true" style="background:#E2E377;">
    <p style="font-size:48;margin:0px auto;text-align:center;">sub center region</p>
   </div>   
  </div>  
 </div>
 
</body>
</html>

分享到：
| Eclipse中导入jquery文件报错
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery布局组件EasyUI Layout使用方法详解

    布局组件EasyUI Layout使用方法详解首先介绍了该组件的基本概念和重要性。对于Web开发人员来说，界面布局通常是一个比较繁琐的任务，特别是对于那些不擅长美工设计的程序员来说，EasyUI Layout能够提供一个简单快捷...

    easyui layout+tab+tree实现网站基本布局

    在实际应用中，`EasyUI Test`这个文件可能包含了示例代码或测试用例，用于演示如何结合使用layout、tab和tree组件。开发者可以参考这些代码来理解它们之间的交互和配置方式。 总的来说，通过熟练运用EasyUI的layout...

    esayui layout

    "EasyUI Layout" 是 EasyUI 中的一个核心组件，用于实现页面的布局管理。下面我们将深入探讨 EasyUI Layout 的相关知识点。 1. **Layout 基本概念**： EasyUI Layout 是一种灵活的布局解决方案，它允许开发者将...

    easyui 扩展layout的方法，支持动态添加删除块

    ### easyUI扩展Layout方法以支持动态添加与删除区块 #### 概述 easyUI是一款基于jQuery的用户界面库，它提供了丰富的UI组件和强大的布局管理功能。本文将详细介绍如何通过扩展easyUI的`layout`方法来实现动态添加...

    JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

    本文主要探讨如何使用 jQuery EasyUI Layout 实现从布局在窗口大小调整时自适应的方法。 在 jQuery EasyUI 中，Layout 是一个强大的组件，用于创建复杂的页面布局。然而，当 Layout 应用于 form 元素时，可能会遇到...

    jquery-Easyui引用与例子

    jQuery EasyUI 可以与后端框架（如Spring MVC、ASP.NET MVC）配合使用，实现数据的动态加载和提交。同时，也能与 AJAX、JSON、XML 等数据格式无缝对接，方便前后端交互。 ### 6. 学习资源与社区支持 - 官方网站：...

    有关easyui-layout中的收缩层无法显示标题的解决办法

    在使用EasyUI布局时，有时会遇到一个棘手的问题，即在设置面板为可折叠（收缩层）后，标题和图标消失，导致界面显示不完整。这个问题主要出现在easyui-layout的实现中，当用户尝试折叠某个面板时，其标题和图标未能...

    JQueryEasyUI Layout布局框架的使用

    使用JQueryEasyUI Layout布局框架前，需要先引入JQuery库和JQueryEasyUI的JS和CSS文件。布局框架中的布局容器称为“layout”，它由五个预定义区域组成，分别是：北部（north）、南部（south）、东部（east）、西部...

    jqeury-easyui-layout问题解决方法

    本文将详细讨论在使用jQuery EasyUI Layout时遇到的问题以及解决方法。 问题描述： 在尝试使用EasyUI布局时，开发者可能会遇到一个情况，即当 `class="easyui-layout"` 写在一个独立的 `div` 元素内时，layout的...

    EasyUI tutorial 中文版 chm

    使用easyUI创建一个border layout在你的web页面 使用easyUI在panel中创建复杂布局 使用easyUI创建折叠面板 使用easyUI创建Tabs标签 使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs ...

    jQuery EasyUI 中文API—Layout(Panel)

    Layout（布局）是 jQuery EasyUI 中的一个核心组件，它允许我们在网页上创建复杂的布局结构，方便地管理和组织页面内容。在本篇文章中，我们将深入探讨 jQuery EasyUI 中的 Layout（面板布局）及其相关API。 Layout...

    EasyUI使用的demo

    例如，可能使用了`&lt;div class="easyui-layout"&gt;`来定义一个可调整的布局区域，并通过`data-options`属性设置各个部分的大小和位置。 2. **数据的增删改查**：EasyUI与后端数据交互时，通常会结合`datagrid`组件。`...

    EasyUI常用控件使用案例

    在项目中，`UILayout`可能是用于存放所有UI布局文件的目录，包括使用到的EasyUI模板、CSS样式和JavaScript脚本。开发者通常会在其中找到`index.jsp`或类似的入口文件，以及各种`.jsp`或`.html`页面，这些页面使用...

    EasyUI使用-中文手册

    - **布局（Layout）**：EasyUI 的布局组件允许开发者划分页面区域，如 north, south, east, west 和 center，通过设置属性实现动态调整大小。 - **表格（Datagrid）**：用于展示数据的表格组件，支持分页、排序、...

    EasyUI布局 高度自适应

    最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问题。其中一个就是datagrid不能很好的布局。...这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好

    jQuery EasyUI Layout实现tabs标签的实例

    在 EasyUI 中，Layout 是一种布局组件，它允许开发者将页面分割成多个区域（如 north, south, west, east 和 center），从而实现复杂的页面结构。而 Tabs 组件则用于展示可切换的面板，通常用于内容的分类和组织。 ...

    jQueryEasyUI框架使用文档.pdf

    jQuery EasyUI 是一个轻量级且功能丰富的前端开发框架，基于 ...在学习和使用 jQuery EasyUI 的过程中，建议参考官方文档，了解每个组件的详细用法和示例，以便更好地利用这个框架来创建高效、美观的 Web 应用程序。

Magicbox
Global site tag (gtag.js) - Google Analytics