JQuery EasyUI 对话框的使用方法


Posted in Javascript onOctober 24, 2010

下面看一下EasyUI的对话框效果图
JQuery EasyUI 对话框的使用方法
js代码:

<script language="javascript" type="text/javascript"> 
function Open_Dialog() { 
$('#mydialog').show(); 
$('#mydialog').dialog({ 
collapsible: true, 
minimizable: true, 
maximizable: true, 
toolbar: [{ 
text: '添加', 
iconCls: 'icon-add', 
handler: function() { 
alert('添加数据') 
} 
},{ 
text: '保存', 
iconCls: 'icon-save', 
handler: function() { 
alert('保存数据') 
} 
}], 
buttons: [{ 
text: '提交', 
iconCls: 'icon-ok', 
handler: function() { 
alert('提交数据'); 
} 
}, { 
text: '取消', 
handler: function() { 
$('#mydialog').dialog('取消'); 
} 
}] 
}); 
} 
</script>

HTML代码
<span onclick="Open_Dialog()">弹框</span> 
<div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="弹框练习"> 
<input id="txRoleID" type="hidden" runat="server" value="0" /> 
<label class="lbInfo">角色名称:</label> 
<input id="txRolename" type="text" class="easyui-validatebox" required="true" runat="server" /><br /> 
<label class="lbInfo"> </label><input type="submit" onserverclick="saveRole" value="保存" runat="server" /> 
<label id="lbmsg" runat="server"></label> 
</div>

下面来介绍Window的具体用法,首先来看属性大多数的属性和窗口(Window)的属性是相同的,下面列出一些 Dialog私有的属性:
属性名 类型 描述 默认值
title 字符串 对话框的标题文本 New Dialog
collapsible 布尔 定义是否显示可折叠按钮 false
minimizable 布尔 定义是否显示最小化按钮 false
maximizable 布尔 定义是否显示最大化按钮 false
resizable 布尔 定义对话框是否可编辑大小 false
toolbar 数组 对话框上的工具条,每个工具条包括: text, iconCls, disabled, handler etc. null
buttons 数组 对话框底部的按钮,每个按钮包括: text, iconCls, handler etc. null
事件
Dialog的事件和窗口(Window)的事件相同。

方法
除了”header”和”body”以外,Dialog的函数方法和窗口(Window)的相同

Javascript 相关文章推荐
javascript调试说明
Jun 07 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
javascript textContent与innerText的异同分析
Oct 22 #Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 #Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 #Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 #Javascript
jQuery中add实现同时选择两个id对象
Oct 22 #Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 #Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 #Javascript
You might like
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Python PO设计模式的具体使用
2019/08/16 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
李宁官方网店:中国运动品牌
2017/11/02 全球购物
会计专业个人求职信范文
2014/01/08 职场文书
给同事的道歉信
2014/01/11 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2014年党务工作总结
2014/11/25 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
党支部半年考察意见
2015/06/01 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
docker 制作mysql镜像并自动安装
2022/05/20 Servers