EasyUI-dialog

　　对话框用于，像添加操作，需要表单数据录入的情况。并且，录入表单在默认的情况下面是隐藏的。在点击“添加”的时候，弹出对话框，来进行录入。

基本属性

1.modal

当modal属性值为true时，弹出对话框后，对话框的底层是不可以进行操作的。

2.title,width,height

分别表示对话框的标题，宽度，高度。

3.collapsible,minimizable,maximizable

默认情况下，对话框右上角的操作按钮只有关闭。通过这3个属性，可以为对话框添加：折叠、最小化、最大化按钮。

4.resizable

该属性用于说明对话框的大小是否可以调节。

5.iconCls

　　这个属性可以修改对话框左侧的图标和title一起说明该对话框的用途。

iconCls:'icon-add1'

弹出对话框之前，先将其显示，否则对话框将无内容

　　虽然可以有css载入，或者在dialog中使用href引入对话框的方式。但是，我喜欢将弹出的内容直接写在页面里面，隐藏起来，然后触发弹出。

<body><input type="button" id="add" value="添加" /><div id="dialog" style="display: none;">姓名：<input type="text" id="name" /><br />年龄：<input type="text" id="age" /></div><script type="text/javascript">$(document).ready(function () {$("#add").click(function () {$("#dialog").show();//必须先显示，再弹出$("#dialog").dialog({title: "添加",width: 400,height: 200});});});</script>
</body>

toolbar

　　toolbar显示的位置在对话框内容的左上方，而buttons显示的位置在对话框内容的右下方，它们的使用方式基本相同。toolbar和buttons的值是数组，格式如下：

[

{text:'Edit',iconCls:'icon-edit',handler:function(){...}},

{},{},{}

]

　　其中，text是按钮的名称，iconCls是按钮的图标，handler是按钮点击时触发的事件。另外，还可以为按钮配置id属性。配置id属性的好处是，在点击按钮后，我们希望按钮禁用。然后，等待事件处理完毕，再启用按钮。

$('#按钮id').linkbutton('disable');
$('#按钮id').linkbutton('enable');

buttons

　　buttons的使用和toolbar一样，下面通过一个例子演示一下。

<body><input type="button" id="add" value="添加" /><div id="dialog" style="display: none;">姓名：<input type="text" id="name" /><br />年龄：<input type="text" id="age" /></div><script type="text/javascript">$(document).ready(function () {$("#add").click(function () {$("#dialog").show();$("#dialog").dialog({title: '添加',width: 400,height: 200,modal: true,buttons: [{text: 'Edit',id: 'Edit',iconCls: 'icon-edit',handler: function () {$('#Edit').linkbutton('disable');$.ajax({type: "POST",url: "..",async: false,data: null,success: function (data) {$('#Edit').linkbutton('enable');}});}}, {text: 'Help',iconCls: 'icon-help',handler: function () {alert('');}}]});});});</script>
</body>

Events

dialog的事件从window中继承，而window又从panel中继承。所以，dialog可定义onLoad、onClose这些事件来进行相关处理操作。

通过href将对话框内容和当前页面分开

function akmaterial_add() {$("<div></div>").dialog({id: "akmaterial_add_dialog",href: "AkMaterial/Add",title: "添加物料",height: 400,width: 500,modal: true,buttons: [{id: "akmaterial_add_btn",text: '添 加',handler: function () {$("#akmaterial_addform").form("submit", {url: "AkMaterial/AddProcess",onSubmit: function () {$('#akmaterial_add_btn').linkbutton('disable');if ($(this).form('validate')) {return true;}else {$('#akmaterial_add_btn').linkbutton('enable');return false;}},success: function (data) {var result = eval('(' + data + ')');if (result.Success) {$("#akmaterial_add_dialog").dialog('destroy');$.show_warning("提示", result.Message);akmaterial_databind();} else {$('#akmaterial_add_btn').linkbutton('enable');$.show_warning("提示", result.Message);}}});}}],onLoad:function() {},onClose: function () {$("#akmaterial_add_dialog").dialog('destroy');}});
}

在WebForm中，弹框里的服务器控件无响应

var dlg = jQuery("#dd").dialog({draggable: true,resizable: true,closed:true,show: 'Transfer',hide: 'Transfer',autoOpen: false,width:600,minHeight: 10,minwidth: 10});dlg.parent().appendTo(jQuery("form:first"));

EasyUI-dialog相关推荐

easyui dialog 中嵌入html页面
最近使用easyui比较多,这个插件确实很好用.在使用时也遇到了大大小小的问题,好在都一一解决了. 记录一下今天遇到的问题. 目的:用easyui的dialog嵌入一个html页面(html中仍有要执 ...
easyui dialog 中打开地图
首先:使用href属性,加载html页面,页面中地图打开失败. 经过测试,如果easyui dialog的地址属性用href超链接,easyui 不会加载整个url页面,只会截取url目标页的body ...
EasyUI——Dialog自定义Toolbar和buttons
这里并没有使用js来渲染easyUI组件,通过HTML来实现. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
jQuery EasyUI dialog 居中最简单的办法
$("#dgid").dialog("center"); 转载于:https://www.cnblogs.com/chengyujia/p/7659842.ht ...
easyui dialog的一个小坑
问题描述: 1.html <div id="dig" style="padding:10px;width:500px;height:300px;font-famil ...
easyui dialog 不执行页面js_Spring Security(六):前端菜单，角色权限页面的搭建
文章回顾: Spring Security(一):整合JWT实现登录功能 Spring Security(二):获取用户权限菜单树 Spring Security(三):与Vue.js整合 Sprin ...
easyUI——Dialog（对话框窗口）
Dialog(对话框窗口) 1.概述扩展自$.fn.window.defaults.使用$.fn.dialog.defaults重写默认值对象. 该对话框是一种特殊类型的窗口,它在顶部有一个工具栏, ...
easyui dialog kindeditor
//设置全局变量 var articleDetailEditor; // 初始化kindeditor; function ArticleeditorCreat(kedit){articleDetail ...
easyui框架中关于dialog自带关闭事件的使用
easyui是一个开源的第三方控件库,虽然使用比较方便,但其中有些事件和样式会与其他的控件或者框架形成冲突. 今天谈一下easyui 中dialog这个控件(对话框) easyui dialog一般在 ...
EasyUI学习总结(一)——EasyUI入门
一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1 下载完成之 ...

EasyUI-dialog

在WebForm中，弹框里的服务器控件无响应

EasyUI-dialog相关推荐

最新文章

热门文章