EasyUI笔记(三)Window窗口
本系列只列出一些常用的属性、事件或方法,具体完整知识请查看API文档
Window(窗口)
窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。
1. 通过标签窗口窗口。
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true">
Window Content
</div>
<div id="win"></div>
$('#win').window({
width:600,
height:400,
modal:true
});
3. 创建复合布局窗口。
像往常一样定义窗口布局。下面的例子显示了如何将窗体分为两部分:北部和中间。
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',split:true" style="height:100px"></div>
<div data-options="region:'center'">
The Content.
</div>
</div>
</div>
属性
窗口的属性扩展自panel(面板),窗口新增或重新定义的属性如下:
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
title | string | 窗口的标题文本。 | New Window |
collapsible | boolean | 定义是否显示可折叠按钮。 | true |
minimizable | boolean | 定义是否显示最小化按钮。 | true |
maximizable | boolean | 定义是否显示最大化按钮。 | true |
closable | boolean | 定义是否显示关闭按钮。 | true |
closed | boolean | 定义是否可以关闭窗口。 | false |
zIndex | number | 窗口Z轴坐标。 | 9000 |
draggable | boolean | 定义是否能够拖拽窗口。 | true |
resizable | boolean | 定义是否能够改变窗口大小。 | true |
shadow | boolean | 如果设置为true,在窗体显示的时候显示阴影。 | true |
inline | boolean | 定义如何布局窗口,如果设置为true,窗口将显示在它的父容器中,否则将显示在所有元素的上面。 | false |
modal | boolean | 定义是否将窗体显示为模式化窗口。 | true |
Dialog(对话框窗口)
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true">
Dialog Content.
</div>
<div id="dd">Dialog Content.</div>
$('#dd').dialog({
title: 'My Dialog',
width: 400,
height: 200,
closed: false,
cache: false,
href: 'get_content.php',
modal: true
});
$('#dd').dialog('refresh', 'new_content.php');
属性
对话框窗口的属性扩展自window(窗口),对话框窗口重新定义的属性如下:
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
title | string | 对话框窗口标题文本。 | New Dialog |
collapsible | boolean | 定义是否显示可折叠按钮。 | false |
minimizable | boolean | 定义是否显示最小化按钮。 | false |
maximizable | boolean | 定义是否显示最大化按钮。 | false |
resizable | boolean | 定义是否可以改变对话框窗口大小。 | false |
toolbar | array,selector | 设置对话框窗口顶部工具栏,可用值有: 1) 一个数组,每一个工具栏中的工具属性都和linkbutton相同。 2) 一个选择器指定工具栏。 对话框窗口工具栏可以声明在<div>标签里面: <div class="easyui-dialog" 对话框窗口工具栏也可以通过数组进行定义: <div class="easyui-dialog" style="width:600px;height:300px" |
null |
buttons | array,selector | 对话框窗口底部按钮,可用值有: 1) 一个数组,每一个按钮的属性都和linkbutton相同。 2) 一个选择器指定按钮栏。 按钮可以声明在<div>标签里面: <div class="easyui-dialog" 按钮也可以通过数组定义: <div class="easyui-dialog" style="width:600px;height:300px" |
null |
Messager(消息窗口)
消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框),
progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。
方法
方法名 | 方法参数 | 描述 |
---|---|---|
$.messager.show | options | 在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象: showType:定义将如何显示该消息。可用值有:null,slide,fade,show。默认:slide。 showSpeed:定义窗口显示的过度时间。默认:600毫秒。 width:定义消息窗口的宽度。默认:250px。 height:定义消息窗口的高度。默认:100px。 title:在头部面板显示的标题文本。 msg:显示的消息文本。 style:定义消息窗体的自定义样式。 timeout:如果定义为0,消息窗体将不会自动关闭,除非用户关闭他。如果定义成非0的树,消息窗体将在超时后自动关闭。默认:4秒。 代码示例: $.messager.show({ |
$.messager.alert | title, msg, icon, fn | 显示警告窗口。参数: title:在头部面板显示的标题文本。 msg:显示的消息文本。 icon:显示的图标图像。可用值有:error,question,info,warning。 fn: 在窗口关闭的时候触发该回调函数。 代码示例: $.messager.alert('我的消息','这是一个提示信息!','info'); |
$.messager.confirm | title, msg, fn | 显示一个包含“确定”和“取消”按钮的确认消息窗口。参数: title:在头部面板显示的标题文本。 msg:显示的消息文本。 fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数,否则传递一个false值。 代码示例 $.messager.confirm('确认对话框', '您想要退出该系统吗?', function(r){ |
$.messager.prompt | title, msg, fn | 显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体。参数: title:在头部面板显示的标题文本。 msg:显示的消息文本。 fn(val): 在用户输入一个值参数的时候执行的回调函数。 代码示例: $.messager.prompt('提示信息', '请输入你的姓名:', function(r){ |
$.messager.progress | options or method | 显示一个进度消息窗体。 属性定义为: title:在头部面板显示的标题文本。默认:空。 msg:显示的消息文本。默认:空。 text:在进度条上显示的文本。默认:undefined。 interval:每次进度更新的间隔时间。默认:300毫秒。 方法定义为: bar:获取进度条对象。 close:关闭进度窗口。 代码示例: 显示进度消息窗口。 $.messager.progress(); 关闭进度消息窗口。 $.messager.progress('close'); |
EasyUI笔记(三)Window窗口的更多相关文章
- easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值
<!-- 父页面 --> <!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "ht ...
- 第二百零三节,jQuery EasyUI,Window(窗口)组件
jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件 ...
- [转载]ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下 ...
- 窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框
EasyUI Window 窗口 扩展自 $.fn.panel.defaults.通过 $.fn.window.defaults 重写默认的 defaults. 窗口(window)是一个浮动的.可拖 ...
- easyui window窗口 随body的滚动条 滚动
问题描述: 当easyui window窗口弹出的时候,依然可以滚动body 的滚动条,而且window窗口也会随它一起滚动 思路:bootstrap 模态框弹出的时候,给body 添加了 .moda ...
- (四)EasyUI 使用——form表单2 & window窗口
form表单组件主要有以下内容(如下图) 6. progressbar进度条 每隔1秒让进度条按随机数填充,直至充满进度条刻度(只能执行一次) 进度条: <div id=" ...
- jQuery EasyUI window窗口实例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- echarts的图表根据父容器大小的改变而改变(弹窗easy-ui的window窗口)
1.echarts的图表只绘制一次,所以要想大小随着父容器变化就得调方法重新绘制.所以把绘制图表的方法提出来. <div class="echart"> <div ...
随机推荐
- Android和servlet通过json完成登录
1.主要过程:Android端发送json数据,servlet接收后解析json数据,通过连接数据库比较并返回json数据到Android端.整个效果: 2.Android端网络连接使用OKHttp开 ...
- cookie理解与实践【实现简单登录以及自动登录功能】
cookie理解 Cookie是由W3C组织提出,最早由netscape社区发展的一种机制 http是无状态协议.当某次连接中数据提交完,连接会关闭,再次访问时,浏览器与服务器需要重新建立新的连接: ...
- HDU_5045_状态压缩dp
http://acm.hdu.edu.cn/showproblem.php?pid=5045 i从1到m依次更新,dp[i][j]表示更新到i题时,j表示每个人的答题状态,分别用0和1表示(因为每个人 ...
- HDU_3853_区间dp
http://acm.hdu.edu.cn/showproblem.php?pid=3853 dp[i][j]表示由空白串刷成b的从i到j位所需要的最小次数. 然后在比较a和b的每一位,再次更新dp表 ...
- 【原创】(二)Linux进程调度器-CPU负载
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...
- Luogu P1280 尼可的任务(dp)
题意: 时间为n,有k个任务,每个任务有一个开始时间和持续时间,从第一分钟开始,如果有开始的任务就要做,问最大空闲时间 n,k<=1e5 思路: 设 dp[i]为i~n时间中最大空闲时间,vec ...
- Xamarin.Forms 二维码扫描实践
开发环境: Visual Studio 2019 版本 16.4.5 公用平台nuget ZXing.Net.Mobile.Forms 2.4.1 Plugin.Permissions 5.0.0-b ...
- yum仓库配置与内网源部署记录
使用yum的好处主要就是在于能够自动解决软件包之间的依赖.这使得维护更加容易.这篇文章主要就是记录部署内网源的操作过程以及yum工具如何使用 因为需要.数据库要从Oracle迁移至MySQL.在部署M ...
- 1.【Spring Cloud Alibaba】服务发现-Nacos
一.服务的提供者与服务的消费者 二.服务发现原理 如果用户中心地址发生变化怎么办? 服务的消费者总能找到服务的提供者的这种原理,即服务发现原理. 三.什么是Nacos? Nacos文档地址请查看,引入 ...
- java 获取两个时间之前所有的日期
正序(2017-01-01 ~2019-xxxxx) package com.founder.util; import java.text.SimpleDateFormat; import java. ...