活用課本範例：簡易的布局方式-使用jquery－劉老師的跨域創想工坊

同學們如果書上的作業都有照作，但還是沒有辦法自行設計自己想要的程式，這裡提供一些想法

首先大家要想好整體如何佈局，佈局可以有不同的方試：

1. 把所有資料都放在同一個頁面上，在視需要顯示或隱藏：

優點：概念簡單也容易實行。一次性載入程試碼，不需過場時間。

缺點：所有程式在一個頁面上顯得雜亂，變數會變多難以維護。如果程式過大，初次載入時間會很長。

2.分成不同場景，如同網頁分頁方式：

優點：程式分離，程式較為精簡，變數較少程式較容易維護。初次載入時間較短。

缺點：需要在不同網頁間傳送資料，需要較高的程式技巧。會需要"過場"的時間。

各種策略都有利弊。同學可以依自己的程式能力和需求做調整。在這裡先用第一種想法來實現。使用的課本中jquer的最簡單概念。

1. 先把所有的場景佈局都想好，要有那些表格那些案件，那些場景。此處以算命網站為例做以下設計：

a. 第一部份為為「輸入個人資料」(class="stage1")，第二部份為「處理過程」階段(class="stage2")，第三部份為顯示「計算結果」(class="stage3")。

輪入資料階要有「重新填寫」和「提交」二個按鍵。
處理過程要放上畫布和「回到上一步」和「計算結果」二個按鍵。

b. 把三個stage 包成<div>之後簡視畫面效果（下圖以dreamweaver為例）

Screen Shot 2022-05-17 at 1.07.53 PM.png

c. 加上課本的Jquery Code 來控制顯示的流程，在這裡用最簡的show()和hide()來做最基本邏輯。等有經驗之後可以試用其他效果，如slide(), fade(). toggle()來加強和美化。

c. 最後測試流程是否完備。

同學們不用著急，還是那句話，先求有再求好。先思考清楚要什麼，再去找到適當的工具即可。祝大家學習愉快。

附上所有程式碼

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>NCU UI</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
   $(document).ready(function(){
       $('.stage1').show();
       $('.stage2').hide();
       $('.stage3').hide();
       $(':submit').click(function(){
           $('.stage1').hide();
           $('.stage2').show();
           $('.stage3').hide();
       })
       $('#button').click(function(){
           $('.stage1').show();
           $('.stage2').hide();
           $('.stage3').hide();
       })
       $('#button2').click(function(){
           $('.stage1').hide();
           $('.stage2').hide();
           $('.stage3').show();
       })
       $('#button3').click(function(){
           $('.stage1').show();
           $('.stage2').hide();
           $('.stage3').hide();
       })


   })
</script>
<style type="text/css">
.stage2 {
}
.stage3 {
}
</style>
</head>

<body>

<div class="stage1">
<p> 第一階段的表格</p>

<form id="form1" name="form1" method="post">
   輔入個人資料<br>
   <p></p>

<label for="textfield">姓名:</label>
<input type="text" name="textfield" id="textfield">

<br>

</form>
</div>
<hr>

<div class="stage2">處理過程
   <br>
<canvas id="canvas"></canvas>
   <p></p>
<input type="button" name="button" id="button" value="回到上一步">
<input type="button" name="button2" id="button2" value="計算結果">


</div>

   <hr>

<div class="stage3">計算結果
<table width="200" border="1">
<tbody>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<input type="button" name="button3" id="button3" value="再算一次">
</div>