接上一篇的文章，下載EasyUI包之後並將其引入我們自己創建的JavaWeb工程中之後，就可以寫自己的代碼來使用Easy UI給我們提供的UI組件了。
Dialog
在上篇筆記中創建的web項目中新創建一個01.jsp頁面：
在01.jsp頁面中使用EasyUI，代碼如下：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>EasyUI入門————EasyUI的Dialog</title>
<!-- 引入jQuery的核心庫-->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.min.js"></script>
<!-- 引入 jQuery EasyUI 核心庫 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.easyui.min.js" ></script>
<!-- 引入EasyUI的中文國際化js，讓EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的樣式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的圖標樣式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5/themes/icon.css" type="text/css"/>
<script type="text/javascript">
$(function () {
/*使用JavaScript動態創建EasyUI的Dialog的步驟：
1、定義一個div，並給它指定一個id
2、使用jQuery選擇器選中該id
3、選中後調用dialog()方法就可以創建EasyUI提供的Dialog
*/
$('#dialog2').dialog(); //使用默認的參數創建EasyUI的Dialog
//使用自定義參數創建EasyUI的Dialog
$('#dialog3').dialog({
title:'3、我是使用JavaScrip、自定義參數創建的Dialog',
width:400,
height:200,
closed:false,
modal:true
});
});
</script>
</head>
<body>
<%--使用純html的方式創建EasyUI的Dialog的步驟：
1、定義一個div
2、將div的class樣式屬性設置爲easyui-dialog,這樣這個普通的div就變成EasyUI的Dialog了
--%>
<div class="easyui-dialog" id="dialog1" title="EasyUI Dialog Test01" style="width: 500px;height: 300px;">
1、Hello! 我是純html創建的EasyUI的Dialog!1111111
</div>
<div id="dialog2" title="EasyUI Dialog Test02">2、Hello!我是JavaScript動態創建EasyUI的Dialog22222</div>
<div id="dialog3" title="EasyUI Dialog Test03">3333333333</div>
</body>
</html>01.jsp運行結果如下：
Dialog 對話框 總結：
繼承`$.fn.window.defaults，`使用`$.fn.dialog.defaults`重載默認值。
依賴關係:
- window 窗口
- linkbutton 鏈接按鈕
使用方法：
- 方式1，使用純html的方式創建：
<div id="dd" title="My Dialog" style="width:400px;height:200px;">
Dialog Content.
</div>- 方式2，使用JavaScript動態創建：
$('#dd').dialog({
modal:true
}); 屬性：
繼承自window，下列是爲 dialog 重寫的特性。
| 名稱 | 類型 | 描述 | 默認值 |
|---|---|---|---|
| title（標題） | String | 對話框標題 | New Dialog |
| collapsible（可摺疊） | boolean | 定義是否顯示摺疊按鈕 | false |
| minimizable（最小化） | boolean | 定義是否顯示最小化按鈕 | false |
| maximizable（最大化） | boolean | 定義是否顯示最大化按鈕 | false |
| resizable（可縮放） | boolean | 定義是否可縮放 | false |
| toolbar（工具欄） | array | 對話窗口頂部的工具欄，每個工具的屬性都跟鏈接按鈕的屬性一樣 | null |
| buttons（按鈕） | array | 對話窗口底部的按鈕，每個按鈕的屬性都跟鏈接按鈕一樣 | null |
