jquery easyui的layout

1.创建一个布局:layout是一个容器,它有5个区域:north(北),south(南),east(东),west(西);center(中)-----------学习中文网地址

<body class="easyui-layout">
  <div region="north" title="North Title" split="true" style="height:100px;"></div>
  <div region="south" title="South Title" split="true" style="height:100px;"></div>
  <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>
  <div region="west" split="true" title="West" style="width:100px;"></div>
  <div region="center" title="center title" style="padding:5px;background:#eee;"></div>
</body>  

2.north(北),south(南),east(东),west(西)都能删除,但是center不能删除,删除则会报错

fit="true"是自适应大小

3.属性,href属性能引入另一个页面,但是引入的是body的内容,别的不行

名称 类型 描述 默认值
title(标题) string(字符串) 布局面板的标题。 null
region(区域) string(字符串) 定义布局面板的位置(方向),可以取下列值的其中之一:north, south, east, west, center。  
border(边框) boolean(布尔型) 设置为true将显示布局面板的边框。 true
split(分隔条) boolean(布尔型) 如果设置为true将显示一个分隔条,用户可以拖动分隔条来改变布局面板的尺寸。 false
iconCls(图标CSS类) string(字符串) 一个用来显示布局面板头部图标的css类。 null
href(超链接) string(字符串) 一个用来从远程站点载入数据的超链接。 null

时间: 2024-08-30 05:59:03

jquery easyui的layout的相关文章

第二百零二节,jQuery EasyUI,Layout(布局)组件

jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个组件依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 一.加载方式 class 加载方式,这个属性一般使用class方法使用 <body id="box" class="easyui-layout"> <div data-opt

jQuery EasyUI布局容器layout实例精讲

这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立他想要的复杂的布局.layout可以基于body或者 div 进行布局. 效果: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>eas

jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页

※ datagrid的基本属性和方法  ※ datagrid分页在前后台的实现 最终效果:    与视图显示对应的view model   public class Book public string ItemId { get; set; } public string ProductId { get; set; } public decimal ListPrice { get; set; } public decimal UnitCost { get; set; } public strin

jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

转自:http://www.cnblogs.com/sunjie9606/archive/2012/09/13/2683636.html 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout" 等 处理方法: 在html片段加载完毕后使用 Js代码 $.parser.parse(context) 即可重新渲染. 实现原理: 首先附上jquery.parser.js的源码 Js代码 (function($){ $.parser

Jquery Easy-UI 树形菜单的运用

一.树形菜单的右键标签 期中增加同级机构.增加下属机构.修改.删除分别是调用了addNode(),del()等方法. <div id="menuTree" class="easyui-menu" style="width: 120px;"> <SecurityTag:Authorize ID="Authorize12" runat="server" FunctionID="fun

java web前端easyui(layout+tree+双tabs)布局+树+2个选项卡tabs

1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title> #parse("ui:include") <style> body{padding:0;margin:0} </style> <script> $(document).ready(function(){ var tabs_content = $

网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它嵌入到网页的任何位置. 基础用法: <div id="p" class="easyui-panel" title="面板-标题" data-options="iconCls:'icon-save',closable:true,coll

Jquery easyui 源代码分析之easyloader

Jquery easyui是一个javascript UI 组件库,使用它可以快速开发企业级的业务系统.如果你正准备开发系统后台,可以选择jquery easyui,也可以选择Ext JS.我个人的看法是,如果开发团队就两三个人,开发工期很短,就一两个月.那么选择jquery easyui就对了,jquery easyui源代码量不多,便于阅读和自行修改.而Ext JSy源代码太多,短时间很难看完,学习曲线也比较陡峭.如果人手充足,时间也富裕,可以考虑使用Ext JS来开发,毕竟Ext JS更强

springmvc + jquery easyui实现分页显示

如有不明白的地方,戏迎加入QQ群交流:66728073 一,下载并导入jquery easyui的导 <link rel="stylesheet" type="text/css" href="<%=basePath%>js/jquery-easyui-1.4/themes/default/easyui.css"> <link rel="stylesheet" type="text/css