溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
