小狐狸事務所: jQuery UI SPA 應用程式 (一) : 環境配置與程式架構

2020年8月18日星期二

jQuery UI SPA 應用程式 (一) : 環境配置與程式架構

最近因為工作整併, 負責的機器變多了, 需要寫一套以 WSH 技術為基礎的 Web 版維運資訊網頁, 以前本來想用 Python 技術來寫, 但由於我司資安要求越來越難搞, 連 Python 開發環境都被掃出版本太舊問題, 為了避免麻煩, 用瀏覽器執行本機 HTML5 + jQuery +WSH + Javascript 單頁應用程式 (Single Page Application, SPA) 大概是唯一的辦法了.

由於之前的 WSH 專案應用程式所使用的 jQuery UI 版本太舊了, UI 介面與函數用法也有些改變, 所以我對此 SPA 專案網頁架構進行了全新設計, 要點如下 :

以本機 IE/Edge 瀏覽器執行 (Active X + WSH 技術)
無須伺服器, 以微軟 Active X 檔案處理取代資料庫 (避免資安問題)
HTML5 + jQuery UI + Bootstrap + WSH + Active X 技術堆疊
以頁籤面板 (tabs) 作為網頁應用程式主架構

關於 WSH 參考清大張智星老師的 "JavaScript 程式設計與應用" 這本書.

Source : 博客來

首先進行環境配置, 因為是要在封閉系統內的本機執行, 因此無法使用 CDN 獲取函式庫資源, 必須配置所需的 Javascript 函式庫, 包括本專案的主力 jQuery UI 與其動態表格外掛 DataTable, 以及配置網頁版面很好用的 Bootstrap 等等. jQuery UI 的最新版是 2016 年 9 月的 1.12.1 版 (似乎已停止更新), 下載位址為 :

# https://jqueryui.com/download/all/

請下載 1.12.1 版的 jQuery UI 與其主題布景 (themes) 之 zip 壓縮檔 :

解壓縮 jQuery UI 後, 將其中的 jquery-ui.js (或 jquery-ui.min.js) 以及 external 資料夾下的 jquery.js (此為搭配此版 jQuery UI 的 1.12.4 版) 複製到專案根目錄的 jquery 資料夾下. 然後解壓縮 jquery-ui-themes-1.12.1.zip 檔, 將解出的 themes 資料夾整個複製到專案根目錄的 jquery 資料夾下即可 :

初步目錄結構如下 :

基本上這樣就可以開始建構本機網頁系統了, 但我想用 Bootstrap 框架來呈現靜態表格資料以及資料排版, Bootstrap 目前最新是 4.5 版 :

# https://getbootstrap.com/docs/4.5/getting-started/download/

下載 Bootstrap 後解壓縮 zip 檔, 裡面有 js 與 css 兩個資料夾, 將 js 目錄底下的 bootstrap.js, bootstrap.js.map 以及 css 目錄底下的 bootstrap.css, bootstrap.css.map 與 bootstrap-grid.css 複製到專案根目錄下的 bootstrap 資料夾下 (注意, .map 檔雖然不影響主要功能, 但 bootstrap.js 會載入該檔, 若缺此兩檔案在瀏覽器 console 會出現錯誤) :

最後使用 jQuery UI 的頁嵌面板作為網頁結構, 寫一個首頁 index_1.htm, 放在根目錄下 :

範例 1 : 單純的頁嵌面板網頁

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Single Page Application</title>
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script src="bootstrap/bootstrap.js"></script>
<link id="theme" href="jquery/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<link href="bootstrap/bootstrap.css" rel="stylesheet">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1</a></li>
<li><a href="#tabs-2">tab2</a></li>
<li><a href="#tabs-3">tab3</a></li>
</ul>
<div id="tabs-1">tab1</div>
<div id="tabs-2">tab2</div>
<div id="tabs-3">tab3</div>
</div>
<script>
$(function(){
$("#tabs" ).tabs();
});
</script>
</body>
</html>

這裡使用了我最喜歡的 hot-sneaks 主題佈景, 結果如下 :

jQuery UI 提供了 25 種主題佈景, 我們可以為網頁加上一個下拉式選單 selectmenu, 透過 jQuery 強大的 DOM 操作功能隨意更換主題佈景, 參考之前的文章 :

# jQuery UI 學習筆記 (一) : 主題布景 (Themes)
# jQuery UI 學習筆記 (十) : 下拉式選單 (Selectmenu)

在上面範例 1 的基礎上添加一個 jQuery UI 的 SelectMenu 元件用來選擇主題佈景 (預設是 hot-sneaks), 例如 :

範例 2 : 可選擇主題布景的頁嵌面板網頁

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Single Page Application</title>
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script src="bootstrap/bootstrap.js"></script>
<link id="theme" href="jquery/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<link href="bootstrap/bootstrap.css" rel="stylesheet">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
</head>
<body>
<select id="themes">
<option value="base">base</option>
<option value="black-tie">black-tie</option>
<option value="blitzer">blitzer</option>
<option value="cupertino">cupertino</option>
<option value="dark-hive">dark-hive</option>
<option value="dot-luv">dot-luv</option>
<option value="eggplant">eggplant</option>
<option value="excite-bike">excite-bike</option>
<option value="flick">flick</option>
<option value="hot-sneaks">hot-sneaks</option>
<option value="humanity">humanity</option>
<option value="le-frog">le-frog</option>
<option value="mint-choc">mint-choc</option>
<option value="overcast">overcast</option>
<option value="pepper-grinder">pepper-grinder</option>
<option value="redmond">redmond</option>
<option value="smoothness">smoothness</option>
<option value="south-street">south-street</option>
<option value="start">start</option>
<option value="sunny">sunny</option>
<option value="swanky-purse">swanky-purse</option>
<option value="trontastic">trontastic</option>
<option value="ui-darkness">ui-darkness</option>
<option value="ui-lightness">ui-lightness</option>
<option value="vader">vader</option>
</select>
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1</a></li>
<li><a href="#tabs-2">tab2</a></li>
<li><a href="#tabs-3">tab3</a></li>
</ul>
<div id="tabs-1">tab1</div>
<div id="tabs-2">tab2</div>
<div id="tabs-3">tab3</div>
</div>
<script>
$(function(){
$("#themes").selectmenu();
$("#themes").val("hot-sneaks");
$("#themes").selectmenu("refresh");
$('#themes').on('selectmenuchange', function() {
var theme=$(this).val();
var href="jquery/themes/" + theme + "/jquery-ui.min.css";
$("#theme").attr("href", href);
});
$("#tabs" ).tabs();
});
</script>
</body>
</html>

上面藍色部分為因應主題佈景選項而加入的網頁與程式碼, 結果如下 :

下面範例 3 則是將主題佈景選擇器與頁籤面板兩個區塊分開, 如果不需要主題佈景部分, 只要將該區塊直接刪除即可 (以下測試為了簡單將固定使用 hot-sneaks 主題佈景) :

範例 3 : 可選擇主題布景的頁籤面板網頁 (選擇器與頁籤面板分離)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Single Page Application</title>
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script src="bootstrap/bootstrap.js"></script>
<link id="theme" href="jquery/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<link href="bootstrap/bootstrap.css" rel="stylesheet">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
</head>
<body>

<select id="themes">
<option value="base">base</option>
<option value="black-tie">black-tie</option>
<option value="blitzer">blitzer</option>
<option value="cupertino">cupertino</option>
<option value="dark-hive">dark-hive</option>
<option value="dot-luv">dot-luv</option>
<option value="eggplant">eggplant</option>
<option value="excite-bike">excite-bike</option>
<option value="flick">flick</option>
<option value="hot-sneaks">hot-sneaks</option>
<option value="humanity">humanity</option>
<option value="le-frog">le-frog</option>
<option value="mint-choc">mint-choc</option>
<option value="overcast">overcast</option>
<option value="pepper-grinder">pepper-grinder</option>
<option value="redmond">redmond</option>
<option value="smoothness">smoothness</option>
<option value="south-street">south-street</option>
<option value="start">start</option>
<option value="sunny">sunny</option>
<option value="swanky-purse">swanky-purse</option>
<option value="trontastic">trontastic</option>
<option value="ui-darkness">ui-darkness</option>
<option value="ui-lightness">ui-lightness</option>
<option value="vader">vader</option>
</select>
<script>
$(function(){
$("#themes").selectmenu();
$("#themes").val("hot-sneaks");
$("#themes").selectmenu("refresh");
$('#themes').on('selectmenuchange', function() {
var theme=$(this).val();
var href="jquery/themes/" + theme + "/jquery-ui.min.css";
$("#theme").attr("href", href);
});
});
</script>

<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1</a></li>
<li><a href="#tabs-2">tab2</a></li>
<li><a href="#tabs-3">tab3</a></li>
</ul>
<div id="tabs-1">tab1</div>
<div id="tabs-2">tab2</div>
<div id="tabs-3">tab3</div>
</div>
<script>
$(function(){
$("#tabs" ).tabs();
});
</script>
</body>
</html>

以上就是這個網頁應用程式的基本架構, 在此基礎上可在各個頁籤顯示不同的資料, 如果網頁是放在伺服器上, jQuery UI 的 tabs 元件各頁籤的內容不一定要寫在網頁中, 也可以指定外部網頁, 例如我們可以將上面第一個頁籤的 href 改為 href="tabs-1.htm", 這樣 id="tabs-1" 的 div 元件就不需要了, div 的內容可以寫在外部檔案 tabs-1.htm 中, 效果一樣, 但這是利用 Ajax 技術從伺服器下載 tabs-1.htm 檔案內容到頁籤中, 網頁若放在伺服器上是沒問題, 但若在本機則無 Ajax 載入效果, 頁籤 1 將不會顯示 tabs-1.htm 的內容, 解決辦法是必須透過檔案函式庫讀取, 再用 jQuery 物件的 html() 函數填入 DOM 中.

有了上面建立的網頁應用程式基礎架構後, 接著測試如何用 Bootstrap 呈現靜態表格, 參考之前的文章 :

# Bootstrap 4 學習筆記 (三) : 表格

Bootstrap 的表格其實是透過下列五個表格類別來控制 table 元素的樣式, 不過為了在表格長度或寬度超過螢幕時產生卷軸 (自適應效果), 通常會在 table 元素外面套一個 div 容器 (套用 container 與 table-responsive 樣式類別) :

table 元素樣式類別	說明
table	套用在 table 元素上的 Bootstrap 表格預設樣式
table-striped	在 table 類別基礎上加上奇偶列背景顏色交替變換效果
table-bordered	在 table 類別基礎上加上顯示儲存格邊框樣式
table-hover	在 table 類別基礎上加上滑鼠滑過時變換背景色效果
table-condensed	在 table 類別基礎上加上儲存格大小緊縮效果

下面範例 4 的三個頁籤分別套用這些表格樣式類別來呈現相同的資料 :

範例 4 : 套用 Bootstrap 的表格樣式類別

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Single Page Application</title>
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script src="bootstrap/bootstrap.js"></script>
<link id="theme" href="jquery/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<link href="bootstrap/bootstrap.css" rel="stylesheet">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
</head>
<body>

<div id="tabs">
<ul>
<li><a href="#tabs-1">預設樣式 table</a></li>
<li><a href="#tabs-2">表格邊框 table-bordered</a></li>
<li><a href="#tabs-3">奇偶交替 table-striped</a></li>
<li><a href="#tabs-4">滑鼠掠過 table-hover</a></li>
<li><a href="#tabs-5">緊實儲存格 table-condensed</a></li>
<li><a href="#tabs-6">混合效果與自適應容器</a></li>
</ul>
<div id="tabs-1">
<div class="container">
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>國文</th>
<th>英文</th>
<th>數學</th>
<th>物理</th>
<th>化學</th>
<th>歷史</th>
<th>地理</th>
</tr>
</thead>
<tbody>
<tr>
<td>王小二</td>
<td>56</td>
<td>78</td>
<td>88</td>
<td>45</td>
<td>89</td>
<td>65</td>
<td>73</td>
</tr>
<tr>
<td>李大明</td>
<td>86</td>
<td>93</td>
<td>79</td>
<td>85</td>
<td>90</td>
<td>87</td>
<td>75</td>
</tr>
<tr>
<td>張阿花</td>
<td>100</td>
<td>98</td>
<td>75</td>
<td>95</td>
<td>89</td>
<td>100</td>
<td>95</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabs-2">
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>國文</th>
<th>英文</th>
<th>數學</th>
<th>物理</th>
<th>化學</th>
<th>歷史</th>
<th>地理</th>
</tr>
</thead>
<tbody>
<tr>
<td>王小二</td>
<td>56</td>
<td>78</td>
<td>88</td>
<td>45</td>
<td>89</td>
<td>65</td>
<td>73</td>
</tr>
<tr>
<td>李大明</td>
<td>86</td>
<td>93</td>
<td>79</td>
<td>85</td>
<td>90</td>
<td>87</td>
<td>75</td>
</tr>
<tr>
<td>張阿花</td>
<td>100</td>
<td>98</td>
<td>75</td>
<td>95</td>
<td>89</td>
<td>100</td>
<td>95</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabs-3">
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>國文</th>
<th>英文</th>
<th>數學</th>
<th>物理</th>
<th>化學</th>
<th>歷史</th>
<th>地理</th>
</tr>
</thead>
<tbody>
<tr>
<td>王小二</td>
<td>56</td>
<td>78</td>
<td>88</td>
<td>45</td>
<td>89</td>
<td>65</td>
<td>73</td>
</tr>
<tr>
<td>李大明</td>
<td>86</td>
<td>93</td>
<td>79</td>
<td>85</td>
<td>90</td>
<td>87</td>
<td>75</td>
</tr>
<tr>
<td>張阿花</td>
<td>100</td>
<td>98</td>
<td>75</td>
<td>95</td>
<td>89</td>
<td>100</td>
<td>95</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabs-4">
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>姓名</th>
<th>國文</th>
<th>英文</th>
<th>數學</th>
<th>物理</th>
<th>化學</th>
<th>歷史</th>
<th>地理</th>
</tr>
</thead>
<tbody>
<tr>
<td>王小二</td>
<td>56</td>
<td>78</td>
<td>88</td>
<td>45</td>
<td>89</td>
<td>65</td>
<td>73</td>
</tr>
<tr>
<td>李大明</td>
<td>86</td>
<td>93</td>
<td>79</td>
<td>85</td>
<td>90</td>
<td>87</td>
<td>75</td>
</tr>
<tr>
<td>張阿花</td>
<td>100</td>
<td>98</td>
<td>75</td>
<td>95</td>
<td>89</td>
<td>100</td>
<td>95</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabs-5">
<div class="container">
<table class="table table-condensed">
<thead>
<tr>
<th>姓名</th>
<th>國文</th>
<th>英文</th>
<th>數學</th>
<th>物理</th>
<th>化學</th>
<th>歷史</th>
<th>地理</th>
</tr>
</thead>
<tbody>
<tr>
<td>王小二</td>
<td>56</td>
<td>78</td>
<td>88</td>
<td>45</td>
<td>89</td>
<td>65</td>
<td>73</td>
</tr>
<tr>
<td>李大明</td>
<td>86</td>
<td>93</td>
<td>79</td>
<td>85</td>
<td>90</td>
<td>87</td>
<td>75</td>
</tr>
<tr>
<td>張阿花</td>
<td>100</td>
<td>98</td>
<td>75</td>
<td>95</td>
<td>89</td>
<td>100</td>
<td>95</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabs-6">
<div class="container table-responsive">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr>
<th>姓名</th>
<th>國文</th>
<th>英文</th>
<th>數學</th>
<th>物理</th>
<th>化學</th>
<th>歷史</th>
<th>地理</th>
</tr>
</thead>
<tbody>
<tr>
<td>王小二</td>
<td>56</td>
<td>78</td>
<td>88</td>
<td>45</td>
<td>89</td>
<td>65</td>
<td>73</td>
</tr>
<tr>
<td>李大明</td>
<td>86</td>
<td>93</td>
<td>79</td>
<td>85</td>
<td>90</td>
<td>87</td>
<td>75</td>
</tr>
<tr>
<td>張阿花</td>
<td>100</td>
<td>98</td>
<td>75</td>
<td>95</td>
<td>89</td>
<td>100</td>
<td>95</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
$(function(){
$("#tabs" ).tabs();
});
</script>
</body>
</html>

效果如下 :

以上為用顯示靜態表格的方法, 測試檔案都寄存於 GitHub :

# https://github.com/tony1966/test/tree/master/jqueryui-app

若要有欄位排序功能, 則必須使用 DataTable 外掛了.

2020-08-19 補充 :

今天在測試 jQuery UI 對話框時發現右上角的 close 圖示不見了, 仔細看版面似乎也跟單獨使用 jQuery UI 時稍有變化, 拿掉 Bootstrap 後一切恢復正常, 確認混用 jQuery UI 與 Bootstrap 會造成 CSS 樣式衝突 :

有 Bootstrap

無 Bootstrap

因此決定拿掉 Bootstrap, 純粹使用 jQuery UI, 內部版面還是使用無邊框的 TABLE 元素為宜.

程式主結構修改如下 (純 jQuery UI) :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Single Page Application</title>
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery-ui.js"></script>
<link id="theme" href="jquery/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
</head>
<body>

<select id="themes">
<option value="base">base</option>
<option value="black-tie">black-tie</option>
<option value="blitzer">blitzer</option>
<option value="cupertino">cupertino</option>
<option value="dark-hive">dark-hive</option>
<option value="dot-luv">dot-luv</option>
<option value="eggplant">eggplant</option>
<option value="excite-bike">excite-bike</option>
<option value="flick">flick</option>
<option value="hot-sneaks">hot-sneaks</option>
<option value="humanity">humanity</option>
<option value="le-frog">le-frog</option>
<option value="mint-choc">mint-choc</option>
<option value="overcast">overcast</option>
<option value="pepper-grinder">pepper-grinder</option>
<option value="redmond">redmond</option>
<option value="smoothness">smoothness</option>
<option value="south-street">south-street</option>
<option value="start">start</option>
<option value="sunny">sunny</option>
<option value="swanky-purse">swanky-purse</option>
<option value="trontastic">trontastic</option>
<option value="ui-darkness">ui-darkness</option>
<option value="ui-lightness">ui-lightness</option>
<option value="vader">vader</option>
</select>
<script>
$(function(){
$("#themes").selectmenu();
$("#themes").val("hot-sneaks");
$("#themes").selectmenu("refresh");
$('#themes').on('selectmenuchange', function() {
var theme=$(this).val();
var href="jquery/themes/" + theme + "/jquery-ui.min.css";
$("#theme").attr("href", href);
});
});
</script>

<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1</a></li>
<li><a href="#tabs-2">tab2</a></li>
<li><a href="#tabs-3">tab3</a></li>
</ul>
<div id="tabs-1">tab1</div>
<div id="tabs-2">tab2</div>
<div id="tabs-3">tab3</div>
</div>
<script>
$(function(){
$("#tabs" ).tabs();
});
</script>
</body>
</html>

沒有留言 :

張貼留言

訂閱：張貼留言 ( Atom )

小狐狸事務所

2020年8月18日星期二

jQuery UI SPA 應用程式 (一) : 環境配置與程式架構

沒有留言 :

文章標籤

常用連結

2020年8月18日 星期二

jQuery UI SPA 應用程式 (一) : 環境配置與程式架構

沒有留言 :

2020年8月18日星期二