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, // 視窗的高度
})