EasyUI中Panel面板的简单使用
场景
效果
属性
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
id | string | 面板(panel)的 id 属性。 | null |
title | string | 显示在面板(panel)头部的标题文字。 | null |
iconCls | string | 在面板(panel)里显示一个 16x16 图标的 CSS class。 | null |
width | number | 设置面板(panel)的宽度。 | auto |
height | number | 设置面板(panel)的高度。 | auto |
left | number | 设置面板(panel)的左边位置。 | null |
top | number | 设置面板(panel)的顶部位置。 | null |
cls | string | 给面板(panel)添加一个 CSS class。 | null |
headerCls | string | 给面板(panel)头部添加一个 CSS class。 | null |
bodyCls | string | 给面板(panel)主体添加一个 CSS class。 | null |
style | object |
给面板(panel)添加自定义格式的样式。 改变面板(panel)边框宽度的代码实例:
|
{} |
fit | boolean |
当设置为 true 时,面板(panel)的尺寸就适应它的父容器。下面的实例演示了自动调整尺寸到它的父容器的最大内部尺寸的面板(panel)。
|
false |
border | boolean | 定义了是否显示面板(panel)的边框。 | true |
doSize | boolean | 如果设置为 true,创建时面板(panel)就调整尺寸并做成布局。 | true |
noheader | boolean | 如果设置为 true,面板(panel)的头部将不会被创建。 | false |
content | string | 面板(panel)主体内容。 | null |
collapsible | boolean | 定义是否显示折叠按钮。 | false |
minimizable | boolean | 定义是否显示最小化按钮。 | false |
maximizable | boolean | 定义是否显示最大化按钮。 | false |
closable | boolean | 定义是否显示关闭按钮。 | false |
tools | array,selector |
自定义工具组,可能的值: 1、数组,每个元素包含 iconCls 和 handler 两个属性。 2、选择器,指示工具组。 面板(panel)工具组可通过已存在 <div> 标签声明:
面板(panel)工具组可通过数组定义:
|
[] |
collapsed | boolean | 定义初始化面板(panel)是不是折叠的。 | false |
minimized | boolean | 定义初始化面板(panel)是不是最小化的。 | false |
maximized | boolean | 定义初始化面板(panel)是不是最大化的。 | false |
closed | boolean | 定义初始化面板(panel)是不是关闭的。 | false |
href | string |
一个 URL,用它加载远程数据并且显示在面板(panel)里。请注意,除非面板(panel)打开,否则内容不会被加载。这对创建一个惰性加载的面板(panel)很有用:
|
null |
cache | boolean | 设置为 true 就缓存从 href 加载的面板(panel)内容。 | true |
loadingMessage | string | 当加载远程数据时在面板(panel)里显示一条信息。 | Loading… |
extractor | function |
定义如何从 ajax 响应中提取内容,返回提取的数据。
|
事件
名称 | 参数 | 描述 |
---|---|---|
onLoad | none | 当远程数据被加载时触发。 |
onBeforeOpen | none | 面板(panel)打开前触发,返回 false 就停止打开。 |
onOpen | none | 面板(panel)打开后触发。 |
onBeforeClose | none |
面板(panel)关闭前触发,返回 false 就取消关闭。下面声明的面板(panel)不会关闭。
|
onClose | none | 面板(panel)关闭后触发。 |
onBeforeDestroy | none | 面板(panel)销毁前触发,返回false就取消销毁。 |
onDestroy | none | 面板(panel)销毁后触发。 |
onBeforeCollapse | none | 面板(panel)折叠前触发,返回false就停止折叠。 |
onCollapse | none | 面板(panel)折叠后触发。 |
onBeforeExpand | none | 面板(panel)展开前触发,返回false就停止展开。 |
onExpand | none | 面板(panel)展开后触发。 |
onResize | width, height |
面板(panel)调整尺寸后触发。 width:新的外部宽度 height:新的外部高度 |
onMove | left,top |
面板(panel)移动后触发。 left:新的左边位置 top:新的顶部位置 |
onMaximize | none | 窗口最大化后触发。 |
onRestore | none | 窗口还原为它的原始尺寸后触发。 |
onMinimize | none | 窗口最小化后触发。 |
方法
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项(options)属性(property)。 |
panel | none | 返回外部面板(panel)对象。 |
header | none | 返回面板(panel)头部对象。 |
body | none | 返回面板(panel)主体对象。 |
setTitle | title | 设置头部的标题文本。 |
open | forceOpen | 当 forceOpen 参数设置为 true 时,就绕过 onBeforeOpen 回调函数打开面板(panel)。 |
close | forceClose | 当 forceClose 参数设置为 true 时,就绕过 onBeforeClose 回调函数关闭面板(panel)。 |
destroy | forceDestroy | 当 forceDestroy 参数设置为 true 时,就绕过 onBeforeDestroy 回调函数销毁面板(panel)。 |
refresh | href |
刷新面板(panel)加载远程数据。如果分配了 'href' 参数,将重写旧的 'href' 属性。 代码实例:
|
resize | options |
设置面板(panel)尺寸并做布局。Options 对象包含下列属性: width:新的面板(panel)宽度 height:新的面板(panel)宽度 left:新的面板(panel)左边位置 top:新的面板(panel)顶部位置 代码实例:
|
move | options |
移动面板(panel)到新位置。Options 对象包含下列属性: left:新的面板(panel)左边位置 top:新的面板(panel)顶部位置 |
maximize | none | 面板(panel)适应它的容器的尺寸。 |
minimize | none | 最小化面板(panel)。 |
restore | none | 把最大化的面板(panel)还原为它原来的尺寸和位置。 |
collapse | animate | 折叠面板(panel)主体。 |
expand | animate | 展开面板(panel)主体。 |
实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body><div id="p" class="easyui-panel" title="My Panel"style="width:500px;height:150px;padding:10px;background:#fafafa;"data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true"><p>panel content.</p><p>panel content.</p></div><div id="p1" class="easyui-panel" title="My Panel"style="width:500px;height:150px;padding:10px;background:#fafafa;"></div>
<script type="text/javascript">$('#p1').panel({href:'dynamic.html',onLoad:function(){alert('loaded successfully');}});
</script>
</body>
</html>
远程调用dynamic.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>远程数据调用</h1>
</body>
</html>
效果
EasyUI中Panel面板的简单使用相关推荐
- 第一百九十九节,jQuery EasyUI,Panel(面板)组件
jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...
- EasyUI中layout布局的简单使用
场景 效果 布局选项(Layout Options) 名称 类型 描述 默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签 ...
- EasyUI中Dialog对话框的简单使用
场景 效果 属性 该属性扩展自窗口(window)下面是为对话框(dialog)重写的属性. 名称 类型 描述 默认值 title string 对话框的标题文本. New Dialog collap ...
- EasyUI中Window窗口的简单使用
场景 效果 属性 该属性扩展自面板(panel),下面是为窗口(window)重写和添加的属性. 名称 类型 描述 默认值 title string 窗口的标题文本. New Window colla ...
- EasyUI中菜单Menu的简单使用
场景 效果 菜单项 菜单项(menu item)代表一个显示在菜单中的单独的项目.它包含下列属性: 名称 类型 描述 默认值 id string 菜单项(menu item)的 id 属性. te ...
- EasyUI中Calendar日历的简单使用
场景 效果 属性 名称 类型 描述 默认值 width number 日历(calendar)组件的宽度. 180 height number 日历(calendar)组件的高度. 180 fit b ...
- EasyUI中进度条的简单使用
场景 效果 属性 名称 类型 描述 默认值 width string 设置进度条(progressbar)的宽度. auto height number 组件的高度.该属性自版本 1.3.2 起可用. ...
- EasyUI中搜索框的简单使用
场景 基本搜索框 流式搜索框 搜索框类别 实现 基本搜索框 <!DOCTYPE html> <html lang="en"> <head>< ...
- 组件面板 html 页面,Html - Bootstrap Panel面板
http://v3.bootcss.com/components/#panels Bootstrap Panel面板 Panel heading without title Panel content ...
最新文章
- 【C#小知识】C#中一些易混淆概念总结(三)---------结构,GC,静态成员,静态类...
- LINUX API函数大全
- go检测出json中的duplicate object key_精读《如何比较 Object 对象》
- matplotlib.pyplot---------Python强大的绘图功能软件
- java 同类调用方法_JAVA中同类中方法的调用问题?
- 应该是最全的算法学习路线了吧法学习路线了吧
- mysql主从同步报错_mysql主从同步报错
- jdba访问mysql_Java中JDBC操作数据库的步骤
- svn的使用--解决commit冲突问题
- DOA——MUSIC算法
- 直线的两点式、一般式以及点到直线的垂点
- 回调函数原理及应用实例
- 推荐三十款最好的免费项目管理软件
- Python并发编程
- AUTOSAR入门介绍
- javaFX 界面例子
- 使用spring的优势
- Hi3516A/Hi3516D SDK 安装以及升级使用说明
- 电信云服务器重装系统,天翼云主机操作(二)
- 华为手机通过ADB禁止系统更新和卸载自带软件
热门文章
- 关闭oracle自动统计,禁用Oracle 11g的统计数据自动收集功能
- Linux运维:常用的压缩解压缩命令(zip、tar)
- Java线程中wait、await、sleep、yield、join用法总结
- J.U.C系列(五)BlockingQueue的使用
- spring BeanPostProcessor,BeanFactoryPostProcessor作用
- nginx 配置详解
- apache dubbo 自定义全局统一的异常处理器
- 苹果手机home键在哪里_苹果手机为什么没有返回键?原来隐藏着更好的方法,涨知识了...
- pyqt 获取 UI 中组件_一起学Vue:UI框架(elementui)
- golang协程介绍和理解