easyui01
目錄
????????一、初識easyui
????????1.1.什么是 easyui ？
????????1.2.常見的ui：
????????1.3.easyui 能帶給我們什么好處？
????????二、準備工作
????????三、easyui框架的使用? ? ? ? ? ? ? ? ? ? ?
一、初識easyui
-
1.1.什么是 easyui ？
????????????????easyui 是一種基于 jQuery 的用戶界面插件集合。
-
1.2.常見的ui：
????????????????Layui，Bootstrap，element ui,ant design,iview。
-
1.3.easyui 能帶給我們什么好處？
????????????????1.easyui 是個完美支持HTML5網頁的完整框架；
????????????????2.easyui 節省網頁開發的時間和規模；
????????????????3.easyui 很簡單但功能強大。
二、準備工作
1.下載 easyui 文件
easyui 官方下載地址：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
????????????????????????????????????????????????????????Download EasyUI Package - jQuery,Angular,React,Vue
導入 easyui 文件包
2.導入 jQuery 庫（ easyui 是基于 jquery 的）
3.引入必要的 js 和 css 文件
1.引入 JQuery（jquery.min.js）
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
引入 easyui 相關文件
2.引入 EasyUI（jquery.easyui.min.js）?
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
3.引入 EasyUI 的中文國際化 js ，讓 EasyUI 支持中文（locale/easyui-lang-zh_CN.js）
4.引入 EasyUI 的樣式文件（/themes/default/easyui.css）
5.引入 EasyUI 的圖標樣式文件（/themes/icon.css）
推薦使用
????????base 標簽（規定頁面上所有鏈接的默認 URL 和默認目標）。
? ? ? ? 語法：
<head><base href="全局地址" target="全局屬性"></head>????????新建名為 common（公共的）文件夾，在該文件夾內新建 head.jsp 頁面存儲公共資源代碼。
（開頭）
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <base href="${pageContext.request.contextPath }/static/" />?????????在引用目錄不用寫路徑名，因為 base 標簽的 href 屬性里面的內容會自動添加在 head 標簽里面的引入的路徑前面。
<!-- 引入jquery庫 --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!-- 引入easyui相關文件 --> <!-- 引入js文件 --> <script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script> <!-- 引入easyui的中文國際化js --> <script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script> <!-- 引入css樣式文件 --> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/> <!-- 引入圖片庫 --> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css"/>（結尾）
總結：在網站制作中有很多部分的代碼是相同的，重復寫的話太繁瑣了，所以可以把這些代碼放在一個公共的頁面，然后在需要使用這些公共資源的地方引入即可。
<!-- 通過include指令引入公共部分頁面head.jsp --> <%@ include file="static/common/head.jsp" %>三、easyui框架的使用? ? ? ? ? ? ? ? ? ? ?
?可以去?JQuery EasyUI中文網?查找你要使用的插件，也可下載 easyui 離線中文文檔
????
?選擇一個插件，復制代碼即可使用。
?
?可以自己試著使用這些插件，如圖：這是用?easyui 插件完成的界面? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
主界面代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>主界面</title> <!-- 通過include指令引入公共部分頁面head.jsp --> <%@ include file="static/common/head.jsp" %> </head> <!-- layout（布局） --> <body class="easyui-layout"> <div data-options="region:'north',title:'網上書城',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div><div data-options="region:'west',title:'菜單管理',split:true" style="width:100px;"><div id="aa" class="easyui-accordion" style="width:300px;height:200px;"><!-- accordion（分類） --><div title="Title1" data-options="iconCls:'icon-reload'" style="overflow:auto;padding:10px;"> <h3 style="color:#0099FF;">Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;"> <h3 style="color:#0099FF;">Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Title3" data-options="iconCls:'icon-reload'" style="padding:10px;"> <h3 style="color:#0099FF;">Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> </div> </div> <div data-options="region:'center',title:'內容區域'" style="padding:5px;background:#eee;"><!-- tabs（選項卡） --><div id="tt" class="easyui-tabs" style="width:100%;height:100%;"> <div title="Tab1" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="iconCls:'icon-reload',closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab3 </div> </div> </div> </body> </html>界面完善：easyui02_^O^——的博客-CSDN博客
完。
總結
- 上一篇： 场效应管（MOS管）
- 下一篇： ValueError('need at