JQuery EasyUI window 用法
var $win;
$win = $('#test-window').window({
title: '添加课程设置信息',
width: 820,
height: 450,
top: ($(window).height() - 820) * 0.5,
left: ($(window).width() - 450) * 0.5,
shadow: true,
modal: true,
iconCls: 'icon-add',
closed: true,
minimizable: false,
maximizable: false,
collapsible: false
}); $win.window('open');
HTML代码
<div id="test-window" class="easyui-window" title="Login" style="width: 300px; height: 180px;">
<div>
欢迎访问http://www.my400800.cn
</div>
<div style="padding: 5px; text-align: center;">
<a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a> <a href="#" class="easyui-linkbutton"
icon="icon-cancel">Cancel</a>
</div>
</div>
属性及方法说明
Window需要依存于以下的三个组件: * 可拖放(Draggable) * 调整大小(Resizable) * 面板(panel)
下面来介绍Window的具体用法,首先来看属性大多数的属性和面板(panel)的属性是相同的
下面列出一些Window私有的属性:
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
zIndex | 数字 | 窗口的 z-index 属性,可以通过这个属性来增加 | 9000 |
draggable | 布尔 | 定义窗口是否可被拖动 | true |
resizable | 布尔 | 定义窗口是否可以被改变大小 | true |
shadow | 布尔 | 如果设置为true,窗口的阴影也将显示。 | true |
modal | 布尔 | 定义窗口是否是一个模式窗口。 | true |
Window也重写了Panel里的一些属性
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
title | 字符串 | 窗口的标题文本 | New Window |
collapsible | 布尔 | 定义是否显示可折叠定义按钮 | true |
minimizable | 布尔 | 定义是否显示最小化按钮 | true |
maximizable | 布尔 | 定义是否显示最大化按钮 | true |
closable | 布尔 | 定义是否显示关闭按钮 | true |
属性
名字 | 类型 | 描述 | 默认值 |
---|---|---|---|
title | 字符串 | 在面板头部显示的标题文本 | null |
iconCls | 字符串 | 一个CSS类来显示在面板中的16x16图标 | null |
width | 数字 | 设置面板的宽度 | auto |
height | 数字 | 设置面板的高度 | auto |
left | 数字 | 设置面板左侧位置 | null |
top | 数字 | 设置面板的顶部位置 | null |
cls | 字符串 | 给面板添加一个CSS类 | null |
headerCls | 字符串 | 给面板头部添加一个CSS类 | null |
bodyCls | 字符串 | 给面板主体添加一个CSS类 | null |
style | 对象 | 给面板自定义样式 | {} |
fit | 布尔 | 当设置为true,面板尺寸将适合它的父容器。 | false |
border | 布尔 | 定义面板的边框 | true |
doSize | 布尔 | 当设置为true,面板载创建的时候将被调整和重新布局 | true |
collapsible | 布尔 | 定义是否显示可折叠定义按钮 | false |
minimizable | 布尔 | 定义是否显示最小化按钮 | false |
maximizable | 布尔 | 定义是否显示最大化按钮 | false |
closable | 布尔 | 定义是否显示关闭按钮 | false |
tools | 数组 | 自定义工具,每个工具可以包含两个属性:iconCls and handler | [] |
collapsed | 布尔 | 定义在初始化的时候折叠面板 | false |
minimized | 布尔 | 定义在初始化的时候最小化面板 | false |
maximized | 布尔 | 定义在初始化的时候最大化面板 | false |
closed | 布尔 | 定义在初始化的时候关闭面板 | false |
href | 字符串 | 一个远程的URL加载数据,然后显示在面板中 | null |
loadingMessage | 字符串 | 当加载远程数据时,在面板中显示的信息 | Loading… |
事件
名字 | 参数 | 描述 |
---|---|---|
onLoad | none | 当远程数据加载时触发 |
onBeforeOpen | none | 当面板打开之前触发 |
onOpen | none | 当面板打开之后触发 |
onBeforeClose | none | 当面板关闭之前触发 |
onClose | none | 当面板关闭之后触发 |
onBeforeDestroy | none | 当面板销毁之前触发 |
onDestroy | none | 当面板关闭之后触发 |
onBeforeCollpase | none | 当面板折叠之前触发 |
onCollapse | none | 当面板折叠之后触发 |
onBeforeExpand | none | 当面板展开之前触发 |
onExpand | none | 当面板展开之后触发 |
onResize | width, height | 当面板调整大小之后触发 width: 新的宽度 height: 新的高度 |
onMove | left,top | 当面板移动之后触发 left: 新的左侧位置 top: 新的顶部位置 |
onMaximize | none | 当窗口最大化的时候被触发 |
onRestore | none | 当窗口恢复到原来的大小时被触发 |
onMinimize | none | 当窗口最小化的时候被触发 |
方法
名字 | 参数 | 描述 |
---|---|---|
options | none | 返回设置的属性值 |
panel | none | 返回面板对象 |
header | none | 返回面板头部对象 |
body | none | 返回面板主体对象 |
setTitle | title | 设置面板头部标题 |
open | forceOpen | 当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数 |
close | forceClose | 当forceClose设置为true,面板被关闭的时候忽略onBeforeClose 回调函数 |
destroy | forceDestroy | 当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数 |
refresh | none | 当设置了href值时,刷新面板来加载远程数据 |
resize | options | 设置面板的大小和布局,这些选项包含以下的属性: width: 新面板的宽度 height: 新面板的高度 left: 新面板的左侧位置 top: 新面板的顶部位置 |
move | options | 移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置 top: 新面板的顶部位置 |
JQuery EasyUI window 用法的更多相关文章
- jQuery EasyUI window窗口实例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- jQuery EasyUI window窗口使用实例
需求:点击[增加]按钮,弹出窗口,并对所有输入项内容进行校验,校验通过就提交给后台的action处理,没有通过校验就弹窗提示. <!DOCTYPE html> <html> ...
- jquery easyui window中的datagrid,只能显示一次问题
最近项目中用到easyui 的动态创建window ,window中嵌入了datagruid.第一次打开是能显示数据,但再次打开时确没显示: 注:url已成功返回了数据. 多次查阅easyui帮助文档 ...
- JQUERY EASYUI 验证框(VALIDATEBOX)用法
Query EasyUI 验证框(ValidateBox)在表单的验证方面给我们提供了很方便的方法,下面来介绍一下验证框(ValidateBox)的详细用法(查看演示):HTML 代码 <inp ...
- jQuery EasyUI 提示框(Messager)用法
jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的HTML代码,只需要按照<jQuery EasyUI框架使用文档>包含必要文件后,在$(function() ...
- 第二百零三节,jQuery EasyUI,Window(窗口)组件
jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件 ...
- 套用JQuery EasyUI列表显示数据、分页、查询
声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...
- [转]Spring3 MVC + jQuery easyUI 做的ajax版本用户管理
原文地址:http://www.iteye.com/topic/1081739 上周写了篇基于spring3.0.5 mvc 简单用户管理实例 ( http://www.iteye.com/topic ...
- [转]EasyUI——常见用法总结
原文链接: EasyUI——常见用法总结 1. 使用 data-options 来初始化属性. data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我 ...
随机推荐
- Web前端开发工程师的就业前景
Web前端开发工程师的就业前景 Web前端开发工程师是一个全新的职业,在IT行业真正受到重视的时间不超过5年.因此,大家越来越关心web前端工程师前景怎么样?web前端工程师就业如何?Web前端开发是 ...
- lsof
lsof `which httpd` //那个进程在使用apache的可执行文件 lsof /etc/passwd //那个进程在占用/etc/passwd lsof /dev/hda6 //那个进程 ...
- Codeforces Round #327 (Div. 2)B(逻辑)
B. Rebranding time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- 关于s:iterator 和s:if 的结合使用
<s:iterator value="list" status="st"> <div class="sidebar-nav" ...
- Mac系统下使用VirtualBox虚拟机安装win7--第二步 创建win7系统
第二步 创建win7系统 启动 Virtual Box 以后,点击窗口左上角的“新建”按钮,如图所示
- java 接口与继承
一.继承条件下的构造方法调用 运行 TestInherits.java 示例,观察输出,注意总结父类与子类之间构造方法的调用关系修改Parent构造方法的代码,显式调用GrandParent的另一个构 ...
- MVC4 遇到问题总结
1.路径编写: 举例1.<img src="../Login/VailCode" width="108" height="40"&g ...
- 拷贝,集合,函数,enumerate,内置函数
1.拷贝 字符串和数字.赋值 id一样 import copy #提供拷贝功能 copy.copy() #原来的和现在的一起修改,不用修改时用浅copy,节省内存,复制最外层 copy.deepcop ...
- 命令行登陆Oracle(包括远程登陆)
本方法适用于在cmd命令行窗口以及pl/sql登陆Oracle下登录本机或者远程Oracle. 1.首先保证在当前主机上设置了ORACLE_HOME环境变量: 例如:ORACLE_HOME=D ...
- wp8 入门到精通 生命周期