JQuery EasyUI 对话框的使用方法
下面看一下EasyUI的对话框效果图
js代码:
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代码
<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)的相同
JQuery EasyUI 对话框的使用方法的更多相关文章
- easyui分页的使用方法
使用: $("#tt").datagrid("getPager").pagination(option); 例子: $("#tb").dat ...
- JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法(转)
原文:JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 jquery-easyui是一个基于jquery的图形界面插件,利用easyui可以创建很多好看的网页界面 ...
- 第二百零四节,jQuery EasyUI,Dialog(对话框)组件
jQuery EasyUI,Dialog(对话框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Dialog(窗口)组件的使用方法,这个组件依赖 ...
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- jquery easyui datebox 时间控件默认显示当前日期的实现方法
jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以
- jquery easyui tab加载内容的几种方法
转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页 ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- [js]jQuery EasyUI的linkbutton组件disable方法无法禁用jQuery绑定事件的问题分析
问题由来 linkbutton 是 jQuery EasyUI 中常用的一个控件,可以使用它创建按钮.用法很简单,使用 a 标签给一个easyui-linkbutton 的class就可以了. < ...
- 雷林鹏分享:jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框
jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框 您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建.这个教程描述 ...
随机推荐
- BZOJ 1688: Disease Manangement (子集枚举)
Disease Manangement Q - 枚举子集 Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d &a ...
- C# 代码中 计算某个函数 或WebService 请求花费时间
/// 计算请求所花费的时间 System.Diagnostics.Stopwatch watch = new System.Diagnostics.Stopwatch(); watch.Start( ...
- js-ajax实现获取xmlHttp对象
//获取xmlHttp对象 function createXMLHttp() { var xmlhttp; //对于大多数浏览器适用 if (window.XMLHttpRequest) { xmlh ...
- 完整的struts.xml文件骨架
完整的struts.xml文件骨架可以直接拿来用,修改一下就可以啦. <?xml version="1.0" encoding="UTF-8"?> ...
- 转:Google论文之一----Bigtable学习翻译
文章来自于:http://www.cnblogs.com/geekma/archive/2013/05/30/3108391.html Bigtable研究 摘要 Bigtable是一个用于管理结构型 ...
- 揭开.NET消息循环的神秘面纱(GetMessage()无法取得任何消息,就会进入Idle(空闲)状态,进入睡眠状态(而不是Busy Waiting)。当消息队列不再为空的时候,程序会自动醒过来)
揭开.NET消息循环的神秘面纱(-) http://hi.baidu.com/sakiwer/item/f17dc33274a04df2a9842866 曾经在Win32平台下奋战的程序员们想必记得, ...
- QT 设置SizePolicy的例子(简单明了)
http://hi.baidu.com/cybertingred/item/e8eadaad0c7f62f615329be7 QPushButton *left = new QPushButton ...
- [Java] TreeMap - 源代码学习笔记
TreeMap 实现了 SortedMap 和 NavigableMap 接口,所有本文还会记录 SortedMap 和 NavigableMap 的阅读笔记. SortedMap 1. 排序的比较应 ...
- GitHub 使用手册 - 基础篇
缘起 Git已经成为程序员必备技能之一,而GitHub做为做流行的Git仓库托管平台,其不仅提供Git仓库托管,还是一个非常棒的技术人员社交平台,可以通过开源的项目进行协作.交流,是现在优秀的工程师必 ...
- python成长笔记
正则表达式 1. 择一匹配:管道符号(|),表示“从多个模式中选择其一”.例:at|home à at.home 2. 点号匹配除了换行符以外的任何字符 3. 边界匹配:\b匹配一个 ...