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 相关文章推荐
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
js浏览器html5表单验证
Oct 17 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP获取文件行数的方法
2015/06/10 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
vue组件watch属性实例讲解
2017/11/07 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
python实现顺序表的简单代码
2018/09/28 Python
Python自定义一个异常类的方法
2019/06/27 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
几个SQL的面试题
2014/03/08 面试题
银行实习人员自我鉴定
2013/09/22 职场文书
运动会开幕式主持词
2014/03/28 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
植树节标语
2014/06/27 职场文书
综合测评自我评价
2015/03/06 职场文书
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers