这篇文章主要介绍了jquery中easyui对话框怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
一、下载
在此我用的1.3.5版本，http://www.jeasyui.com/download/list.php
解压后，如图：
删除 demo文件夹。
二、建立基础模板
<!DOCTYPE html> <html> <head> <title>引入</title> <meta charset="UTF-8" /> <!--引入模板css--> <link rel="stylesheet" type="text/css" href="easy/themes/bootstrap/easyui.css" /> <!--引入图标css--> <link rel="stylesheet" type="text/css" href="easy/themes/icon.css" /> <style> #userinput{ padding:30px 0 0 100px} p{ height:40px; line-height:40px;padding:4px 0 0 25px;} .textbox { height:30px; padding:0 2px; } </style> </head> <body> <div id="dd" class="easyui-dialog" title="标题" data-options="iconCls:'icon-save',resizable:true,modal:true"> 内容 </div> <!--引入jquery--> <script type="text/javascript" src="easy/jquery.min.js"></script> <!--引入easyui库--> <script type="text/javascript" src="easy/jquery.easyui.min.js"></script> <!--引入语言包--> <script type="text/javascript" src="easy/locale/easyui-lang-zh_CN.js" ></script> <!--自定义js--> <script type="text/javascript" src="1.js" ></script> </body> </html>三、对话框
1，class引入方式：
<div id="dd" class="easyui-dialog" title="My Dialog" data-options="iconCls:'icon-save',resizable:true,modal:true"> Dialog Content. </div>
2，使用Javascript创建对话框窗口也是允许的。现在让我们创建一个模式窗口并调用'refresh'方法通过ajax读取内容。
<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');3，属性
//属性设置 $('#box').dialog({ title : '标题', width : 400, height : 250, modal : true, //toolbar : '#tt', toolbar : [{ text : '编辑', iconCls : 'icon-edit', handler : function () { alert('edit'); }, }, {}], //buttons : '#bb', buttons : [{ text : '保存', iconCls : 'icon-ok', handler : function () { alert('save'); } },{}] }); <div id="tt"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">帮助</a> </div> <div id="bb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">保存</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">关闭</a> </div> PS：Dialog 是继承自 Window 组件的，所以 Window 组件和 Panel 组件均可用。4,事件列表
窗口的事件完整继承自 Window(面板)。所以，直接参考 Window 面板的事件即可。
//Dialog 事件
$('#box').dialog({
width : 600,
height : 400,
modal : true,
onClose : function () {
alert('关闭后触发！');
},
});
5,方法
dialog none 返回外部对话框对象
感谢你能够认真阅读完这篇文章，希望小编分享的“jquery中easyui对话框怎么用”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
