Jquery-EasyUI的簡單入門
阿新 • • 發佈：2018-12-13
一、EasyUI 簡介與下載
easyui是一種基於jQuery的使用者介面外掛集合。
easyui為建立現代化，互動，JavaScript應用程式，提供必要的功能。
使用easyui你不需要寫很多程式碼，你只需要通過編寫一些簡單HTML標記，就可以定義使用者介面。
easyui是個完美支援HTML5網頁的完整框架。
easyui節省您網頁開發的時間和規模。
easyui很簡單但功能強大的。
下載【jquery-easyui-1.5.5.7】完成之後，得到壓縮包，解壓後文件夾目錄如下：
二、EasyUI的入門範例
1、將 jquery-easyui 外掛加入到工程
新建一個JavaWeb工程，將jquery-easyui資料夾中一些不必要的檔案刪掉，只保留必要的檔案加入到工程中，如下圖所示：index.css 和 index.js 為自定義的檔案，編寫自己的程式碼。
2、在index.jsp頁面中使用 EasyUI：
1）引入必要的js和css樣式檔案：注意引入順序
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Easyui+SSH</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.5.7/themes/default/easyui.css"></link> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.5.7/themes/icon.css"></link> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/index.css"></link> </head> <body> <h3>歡迎進入首頁</h3> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.5.7/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.5.7/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.5.7/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script> </body> </html>
2） 有兩個方法宣告的 UI 元件:
<1> 直接在 HTML 宣告元件
<h3>歡迎進入首頁</h3>
<div id="dlg" class="easyui-dialog" title="easyui-dialog對話方塊" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
The dialog content.對話方塊
</div><2> 編寫 JS 程式碼來建立元件（推薦使用
<h3>歡迎進入首頁</h3>
<div id="dlg">
The dialog content.對話方塊
</div>
--index.js--
$(function(){
$("#dlg").dialog({
title: "easyui-dialog對話方塊",
closed: false,
width: 400,
height: 200,
cache: false,
iconCls:'icon-save'
});
});