最近上 Hahow 學校的 jQuery 課程後, 讓我想起 9 年前 (2014) 學過的 EasyUI 套件, 當時用 EasyUI v.1.4 版與後端 PHP 程式搭建了一個股票投資決策輔助系統, 那時為了快速完工僅測試了幾個會用到的元件 (主要是 Tabs 與 DataGrid 等) 便開始搭建, 並沒有對全部元件進行完整測試. 最近想在 Mapleborad 上改用 Python Django 重新建構此系統, 打算對新版的 EasyUI v1.10 進行較全面之測試.
本系列之前的文章參考 :
EasyUI 官網網址如下 :
功能展示網頁 :
一. 使用官網 CDN 資源檔 :
此種方式完全不用準備任何資源檔案, 直接在網頁的 head 中匯入官網 CDN 所提供的 EasyUI 程式與樣式檔即可, 這樣會一直使用 EasyUI 最新版, 目前是 v1.10.17 版, 搭配的 jQuery 則是 v3.3.1 版, 網頁範本如下 (easyui-cdn-template.htm) :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="https://www.jeasyui.com/easyui/locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<!--EasyUI 元件-->
<script>
$(function(){
});
</script>
</body>
</html>
注意, 這些 CDN 資源檔以前用 http 協定就可以, 但現在都要改用 https 協定才行, 否則會因為瀏覽器無法載入資源而不能顯示效果 (按滑鼠右鍵選檢查到 Console 會看到出現安全性錯誤.
這樣就可以在 body 中撰寫包含 EasyUI 元件的網頁內容了, 例如標籤面板 easyui-tabs :
測試 1 : 標籤面板 (使用 CDN 資源) [看原始碼]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="https://www.jeasyui.com/easyui/locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<div class="easyui-tabs" style="width:400px;height:200px">
<div title="Tab1" style="padding:10px">
<p style="font-size:14px">這是 Tab1</p>
</div>
<div title="Tab2" style="padding:10px">
<p style="font-size:14px">這是 Tab2</p>
</div>
<div title="Tab3" style="padding:10px">
<p style="font-size:14px">這是 Tab3</p>
</div>
</div>
<script>
$(function(){
});
</script>
</body>
</html>
結果如下 :
跟 Bootstrap 很像, EasyUI 的 tabs 元件使用兩層 div 結構, 只要在外層 div 加上 easyui-tabs 樣式類別可, 毋須使用 jQuery 程式進行設定.
二. 自備 EasyUI 資源檔 :
此方式適用於需要特定版本的 EasyUI 場合, 因為 EasyUI 官網提供的 CDN 資源檔都是最新版本, 有時版本差異可能造成網頁顯示異常甚至無法運作, 自備特定之資源檔是比較保險的做法.
首先須下載 EasyUI 壓縮檔, 官網提供目前四大前端技術之版本, 此處下載 jQuery 版 (因為我會的也只有 jQuery, 新式前端框架也只略懂 Vue 而已 XD) :
點選 Freeware 授權版, 此版本可免費使用於非營利專案 (政府部門除外) :
將下載之 zip 檔解壓縮後複製其中的 jquery.min.js 與 jquery.easyui.min.js 兩個檔案, 以及 themes 與 locale 這兩個資料夾到專案目錄下 :
然後將上面的 CDN 範本網頁修改為如下參考本地資源的範本網頁 (easyui-local-template.htm) :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<!--EasyUI 元件-->
<script>
$(function(){
});
</script>
</body>
</html>
然後就可以在 body 內撰寫包含 EasyUI 元件的網頁內容了, 例如標籤面板 :
測試 2 : 標籤面板 (使用本地資源) [看原始碼]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<div class="easyui-tabs" style="width:400px;height:200px">
<div title="Tab1" style="padding:10px">
<p style="font-size:14px">這是 Tab1</p>
</div>
<div title="Tab2" style="padding:10px">
<p style="font-size:14px">這是 Tab2</p>
</div>
<div title="Tab3" style="padding:10px">
<p style="font-size:14px">這是 Tab3</p>
</div>
</div>
<script>
$(function(){
});
</script>
</body>
</html>
結果與上面使用 CDN 資源是一樣的.
沒有留言 :
張貼留言