jquery中easyui对话框怎么用

这篇文章主要介绍了jquery中easyui对话框怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的湘潭网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

一、下载

在此我用的1.3.5版本，http://www.jeasyui.com/download/list.php

解压后，如图： jquery中easyui对话框怎么用

删除 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，属性

jquery中easyui对话框怎么用

//属性设置
$('#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对话框怎么用”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

分享标题：jquery中easyui对话框怎么用
网页地址：https://www.cdcxhl.com/article38/jhcesp.html

成都网站建设公司_创新互联，为您提供定制开发、网站排名、网页设计公司、虚拟主机、关键词优化、App设计

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容