由於之前的 WSH 專案應用程式所使用的 jQuery UI 版本太舊了, UI 介面與函數用法也有些改變, 所以我對此 SPA 專案網頁架構進行了全新設計, 要點如下 :
- 以本機 IE/Edge 瀏覽器執行 (Active X + WSH 技術)
- 無須伺服器, 以微軟 Active X 檔案處理取代資料庫 (避免資安問題)
- HTML5 + jQuery UI + Bootstrap + WSH + Active X 技術堆疊
- 以頁籤面板 (tabs) 作為網頁應用程式主架構
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>
沒有留言:
張貼留言