EasyUI 簡介
easyui 是一種基於 jQuery 的用戶界面插件集合。
easyui 為創建現代化，互動，JavaScript 應用程序，提供必要的功能。
使用 easyui 你不需要寫很多代碼，你只需要通過編寫一些簡單 HTML 標記，就可以定義用戶界面。
easyui 是個完美支持 HTML5 網頁的完整框架。
easyui 節省您網頁開發的時間和規模。
easyui 很簡單但功能強大的。
官網地址：http://www.jeasyui.com/index.php
文檔地址：
快速入門 彈出對話框 demo
第一步： 下載 Jquery EasyUI
你在使用和進行開發時，請遵守官方相應的條款，尊重他們的知識版權。
目前官方最新版本是：jQuery EasyUI 1.5，官方提供了兩個版本供下載，GPL 版本和商業版本，你根據自己的需要下載
- GPL 版本 GPL 版本在 GPl 協議下有效，你能在任何遵循 GPl 協議的項目下使用它。
- 商業版本 商業版在 Commercial 協議下有效，你能在任何非 GPL/專有的協議下使用。
第二步：創建 html 文件，並添加相關引用
創建項目的文件夾
easydemo // 項目根目錄
├── index.html // 我們的測試頁面
└── lib // 第三方組件
└── jquery-easyui-1.5.5.2 // 下載的easyui的壓縮包解壓后的文件夾
├── easyloader.js // easyui的動態加載組件的js
├── jquery.easyui.min.js // 壓縮后的包！！！關鍵！！
├── jquery.easyui.mobile.js
├── jquery.min.js // 依賴的jq的文件
├── locale // 本地語言的文件夾
├── plugins // 拆分的組件
└── themes // 樣式主題文件夾第三步： 修改 index.html 文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- easyui的樣式，可以選擇其他主題 --> <link rel="stylesheet" href="./lib/jquery-easyui-1.5.5.2/themes/bootstrap/easyui.css"> <!-- easyui的圖標css文件 --> <link rel="stylesheet" href="./lib/jquery-easyui-1.5.5.2/themes/icon.css"> <!-- easyui 依賴jq --> <script src="./lib/jquery-easyui-1.5.5.2/jquery.min.js"></script> <!-- jq easyui的js腳本 --> <script src="./lib/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script> <!-- 引用語言包 --> <script src="./lib/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script> <title>AICODER jQuery EasyUI Demos</title> </head> <body> <!-- 功能：點擊按鈕彈出模態對話框 --> <input type="button" value="彈出模態對話框" id="btnOpenDialog"> <!-- 設置彈出來的對話框div，首先設置為隱藏 --> <div id="addDialog" style="display: none;"> <h3>添加的對話框</h3> </div> <script> $(function () { $('#btnOpenDialog').on('click', function () { // 彈出對話框 $('#addDialog').dialog({ modal: true, // 是否是模態對話框 title: 'AICODER全棧實習--添加用戶！', // 彈出來的窗口的標題 width: 400, // 窗口的寬度 height: 400, // 窗口的高度 }); }