EasyUI jQuery插件：属性与CSS/JS详解
2星 | 下载需积分: 9 | DOC格式 | 61KB |
更新于2024-09-13
| 140 浏览量 | 举报 "这篇文档是关于jQuery插件EasyUI的属性汇总，主要涵盖了CSS和JS片段，特别是针对window窗口和panel面板的详细属性设定。"
EasyUI是基于jQuery的一个前端框架，它提供了一系列轻量级、易于使用的组件，用于快速构建用户界面。在这个属性汇总中，我们关注的是窗口(window)和面板(panel)这两个核心组件。
首先，`diveasyui-window`是用来创建窗口样式的，其主要属性包括：
1. `modal`: 指定窗口是否为模态窗口，`true`表示是，`false`表示否。模态窗口会阻止用户与页面其他部分的交互，直到窗口被关闭。
2. `shadow`: 控制窗口是否显示阴影，`true`为显示，`false`为不显示。
接下来是`diveasyui-panel`，它是创建面板的CSS类，拥有丰富的定制选项：
1. `title`: 设置面板的标题文本。
2. `iconCls`: 通过指定的CSS类在面板头部显示一个16x16像素的图标。
3. `width`和`height`: 分别用于设置面板的宽度和高度，若未设定，默认值为`auto`。
4. `left`和`top`: 定义面板相对于父容器的位置。
5. `cls`, `headerCls`, `bodyCls`: 分别在整体面板、面板头部和内容区添加自定义CSS类。
6. `style`: 直接添加额外的CSS样式到面板上。
7. `fit`: 如果设为`true`，面板会根据其父容器自动调整大小，默认为`false`。
8. `border`: 控制面板边框的显示，`true`为显示，`false`为隐藏，默认为`true`。
9. `doSize`: 当为`true`时，面板会在需要时重新绘制大小和布局，默认为`true`。
10. `collapsible`, `minimizable`, `maximizable`, `closable`: 分别控制面板是否可以折叠、最小化、最大化和关闭，均默认为`false`。
11. `tools`: 允许自定义工具栏，每个工具包括`iconCls`（图标CSS类）和`handler`（处理函数）。
12. `collapsed`, `minimized`, `maximized`, `closed`: 分别定义面板初始化时的状态，如收缩、最小化、最大化或关闭，所有这些默认为`false`。
13. `href`: 可以从指定URL加载远程数据并在面板中显示。
14. `loadingMessage`: 远程数据加载时显示的提示信息，默认为"Loading…"。
除了这些属性，EasyUI的panel组件还有对应的事件：
1. `onLoad`: 当远程数据加载完成时触发。
2. `onBeforeOpen`: 在面板打开之前触发，可用于执行预处理操作。
3. `onOpen`: 面板打开后触发，可进行后续处理。
这些属性和事件使得开发者能够灵活地控制和扩展EasyUI的窗口和面板组件，以满足各种复杂的需求。通过熟练掌握这些属性和事件，可以轻松创建出具有丰富交互功能的用户界面。
CSS 类定义：
1、div easyui-window 生成一个 window 窗口样式。
属性如下：
1)modal:是否生成模态窗口。true[是] false[否]
2)shadow:是否显示窗口阴影。true[显示] false[不显示]
2、div easyui-panel 生成一个面板。
属性如下:
1)title:该标题文本显示在面板头部。
2)iconCls:在面板上通过一个 CSS 类显示 16x16 图标。
3)width:设置面板宽度。默认 auto。
4)height:设置面板高度。默认 auto。
5)left:设置面板左边距。
6)top:设置面板顶部位置。
7)cls:在面板中增加一个 Class 类。
8)headerCls:在面板头部中增加一个 Class 类。
9)bodyCls:在面板内容中增加一个 Class 类。
10)style:在面板中增加一个指定样式。
11)fit:当 True 时设置该面板尺寸适合于它的父容器。默认 false。
12)border:当定义时显示面板边界。默认 true。
13)doSize:如果设置为 True，该面板将重绘大小，并重建布局。默认 true。
14)collapsible:当定义时显示可折叠面板的按钮。默认 false。
15)minimizable:当定义时显示最小化面板的按钮。默认 false。
16)maximizable:当定义时显示最大化面板的按钮。默认 false。
17)closable:当定义时显示关闭面板的按钮。默认 false。
18)tools:自定义工具栏，每个工具都包含两个属性:iconCls、handler。
19)collapsed:当定义时该面板初始化时处于收缩状态。默认 false。
20)minimized:当定义时该面板初始化时处于最小化状态。默认 false。
21)maximized:当定义时该面板初始化时处于最大化状态。默认 false。
22)closed：当定义时该面板初始化时处于关闭状态。默认 false。
23)href:一个 url，加载远程数据并显示在面板中。
24)loadingMessage:当加载远程数据时，在面板中显示一个消息。默认 Loading…
事件如下:
1)onLoad:当远程数据加载完毕后激活。
2)onBeforeOpen:当面板打开前激活。
3)onOpen:当面板打开后激活。
4)onBeforeClose:当面板关闭前激活。
5)onClose:当面板关闭后激活。
6)onBeforeDestroy:当面板销毁前激活。
7)onDestroy:当面板销毁后激活。
8)onBeforeCollpase:当面板收缩前激活。
9)onCollapse:当面板收缩后激活。
10)onBeforeExpand:当面板扩展前激活。
11)onExpand:当面板扩展后激活。
下载后可阅读完整内容，剩余8页未读，立即下载
相关推荐
7 浏览量
katheine1314
- 粉丝: 0
- 资源: 10
我的内容管理
展开
最新资源
- 简介
- ArcGIS_Engine_C#实例开发教程+源码（超值）
- 矩阵理论全套课件PPT (北航、北理、清华、北邮).rar
- project-1 2.0
- RobusTest-crx插件
- 1个
- ML_Projects
- TCP服务器完整源码(基于IOCP实现) v1.4-易语言
- Prolific USB-to-Serial Comm Port
- Delphi7-SQLMemTable 多线程修改内存表 例子.rar
- 二维码识别工具.zip
- Stashio [URL Saver]-crx插件
- rest_pistache
- TIC
- docusaurus-netlifycms:docusaurs和Netlify CMS的简单实现
- Trainual-crx插件
