[Hexschool Web Layout Training] — Week_5 後台表單設計

發表於 更新於 分類於 ， ， 文章字數： 6.2k 所需閱讀時間 ≈ 6 分鐘

第五週的練習

Introduction & 前言

結束了前兩週的 RWD 地獄式訓練，這週迎來的是難度稍微低一點的後台表單設計，因為後台通常很少用手機看，所以本週沒有 RWD。

因為這次的課程有提到 Bootstrap，所以這次作業老師是建議套上 Bootstrap，但因為平常就有在使用，所以想改用手幹的方式看看能不能幹出一個 Modal 以及 Table。

這次也是使用 Gulp，如果你還沒用過或是想知道怎麼從 0 開始建立一個 Gulp 歡迎參考我的上一篇文章，[Tool Notes] — 關於Gulp。

Summary & 摘要

*本篇文章將會以三個角度來紀錄， 課程心得(上課後的心得整理)、練習心得(做完作業後的心得整理)) 及 **小組任務(每週會有一項小組任務，寫完後的心得)*。

每週的練習挑戰和地下城有點像，都有自己必須練習到的地方；本週需要練習的目標有至少兩點以上的練習菜單，及額外的一項打字練習。

  1. 語意命名

  2. 再次大推真的加快寫 Code 速度很多 -> 幾乎全程使用 emmet 開發

  3. 英打速度 練習

關卡目標

  1. Bootstrap 4 套用 本次不使用 Bootstrap

  2. 後台表單設計

課程心得

本週課程開始以 Input 表單及三劍客(form、input、submit)為開頭，介紹了一下關於 Form 表單的使用。

這邊引用 W3C 的例子：

1
2
3
4
5
6
7
<form action="/action_page.php" methods="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

關於 Form 表單的使用時機大多都是在資料表格上，像是要填寫個人資訊或是會員資料…等等，那這個頁面可能就會使用大量的 Input。

而上方提到的例子就是一個表單，form 的使用其實很清楚且容易明白，就是把你要送給後端的那些 值 的內容全部包起來！然後透過 action="/action_page.php" 這句的 action 把內容送到特定的位置去！

至於怎麼送呢，就是透過 methods="post" 的方式，而方法有兩種，就是 get 及 post。

兩種方法的差異如下：

  1. get: 網址會帶上你的參數，例如上方的 First name，將會把 value 待在網址後方，value 前方會有 name 的名稱。例：https://xxx.com?fname='123'

  2. get: 有長度限制，因為是 URL。

  3. post: 網址不會帶任何參數，相對安全。

  4. post: 因為網址不用帶參數，所以不受 URL 長度限制。

關於 CSS Reset 及 CSS Normalize

大家通常切版應該都會用到 CSS Reset 或是 CSS Normalize，兩者的最大差異就是 CSS Reset 幾乎是把所有東西都初始化歸零，但是 CSS Normalize 並不會將瀏覽器的默認裝置給刪除，某些元素還是保有原本自己的特性。

這邊舉個大家最熟悉的套件例子，Bootstrap 即是使用 CSS Normalize。

Bootstrap

接下來幾乎都是 Bootstrap 的介紹時間，主要提及怎麼引入即使用，這邊就是複習階段了。

練習心得

本次最大的挑戰應該就是 Modal，所以自己先在腦海大致想了一遍後開始時做。

關於 Modal

先提醒一下這邊會用到 JavaScript 如果還不太了解的可以先參考我的 JavaScript 新手系列從0到1筆記(第一篇大概就能有個概念)，如果想先以切版為主，參考下方範例就足夠了：

  1. [JavaScript Notes] — 淺談 JavaScript #1 - JavaScript 執行環境及作用域

  2. [JavaScript Notes] — 淺談 JavaScript #2 - 運算子、型別與文法

  3. [JavaScript Notes] — 淺談 JavaScript #3 - 物件

  4. [JavaScript Notes] — 淺談 JavaScript #4 - 關於 This 那些事

首先就是要先寫一個 屬性為 position:fixed; 的 Div 把整個螢幕包住，然後將 Modal 的 Div 放置中央，透過 display: flex; 把最外層的 Div 設定為 **外元件(Container)**，應該可以很快就辦到！

先寫一個 Modal Div

第二步就是在 內元件(Item) 開始寫內容樣式，這邊也可以將第二層當作 內元件+外容器，因為你可能會在下一層同時有 Title 以及 關閉按鈕。

第三步就是怎麼打開了，這邊用類似上次第三週助教漢堡鈕的寫法，設定好樣式之後，透過最大寬度或是最大高度，預設為 0 的方式隱藏它，最後在透過 JavaScript 的操作，替設定寬高為 0 的那個 Div 加上額外的 Class Name，比如 show，然後透過這個 Class Name 去吃另一個設定好的 CSS，之後就會把原本預設寬高為 0 的 CSS 給蓋過去了！

這邊提供一下這次自己實作的的方法， .modal 為要顯示的彈窗，加上 background-color: rgba(0, 0, 0, 0.7); 看起來會更有彈窗的感覺：

1
2
3
4
5
6
7
8
9
10
11
12
.modal {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: auto;
  transition: all 250ms ease;
  transform: scale(0, 0);
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}

其中 Modal 可以縮放的動畫就是透過 transform: scale(0, 0); 及 transition: all 250ms ease;，其實只要你更改到 CSS 樣式，在那個元件加上 transition: all 250ms ease; 就會替你更改的事情加上補間動畫，有興趣可以參考此篇文章。

接著再透過 JavaScript 的操作，在點擊要開啟彈窗的地方加上 onclick="showDetailModalHandler()"，例如下列程式碼：

1
2
3
<a href="#" onclick="showDetailModalHandler()">
  <i class="material-icons icon">visibility</i>
</a>

然後在透過 JavaScript 或是 JQuery 替目標加上 ClassName(要使用 addClass 或 toggleClass 其實都可以)：

1
2
3
4
5
6
7
8
9
10
11
// 顯示個人詳細資訊彈窗
function showDetailModalHandler(){
  $('#detailModal').addClass('modal-show');
};

// 或

function showDetailModalHandler(){
  let target = document.getElementById('detailModal');
  target.classList.add("modal-show")
};

這樣就能打開彈窗，至於關閉作法一模一樣，在要關閉的叉叉上加上 onclick="closeModal()" 抑或是直接對目標下 click() 事件都可以，例如下方程式碼，這邊使用 Class Name 不使用 ID 因為很多地方彈窗可能都會用到：

1
2
3
4
5
6
//- 關閉個人詳細資訊彈窗 或 關閉新增個人詳細資訊彈窗 或 關閉個人編輯詳細資訊彈窗
$('.closeModal-btn').click(function(){
  $('#detailModal').removeClass('modal-show');
  $('#addDetailModal').removeClass('modal-show');
  $('#editDetailModal').removeClass('modal-show');
});

這樣就能做到開啟關閉彈窗，提醒一下這邊不是最好的做法，因為你可能每新增一個彈窗就要再來 JS 這邊加上要 add 及 remove 的 Class Name，但目前這樣應該是夠用的！

CSS動畫94流暢

另外點擊空白處想關閉 Modal 可以參考此篇，這邊我的作法就是抓滑鼠的鬆開事件(點擊事件也可以)，如果點在目標區域外，就做我要做的事情，範例如下：

1
2
3
4
5
6
7
8
//- 點擊空白區域外
$(document).mouseup(function(e){
  let clickTargetArea = $(' #targetOne');    // 設定點擊目標區域
  if(!clickTargetArea.is(e.target) && clickTargetArea.has(e.target).length === 0) {
    //- 關閉個人詳細資訊彈窗 或 關閉新增個人詳細資訊彈窗 或 關閉個人編輯詳細資訊彈窗
    $('#detailModal').removeClass('modal-show');
  }
});

這邊提供完整 CodePen 範例 2020春季網頁切版直播班 - 第五週作業範例 - 土炮Modal：

關於對話框

另外應該就是對話框的部分，這邊也是要透過 JS 去取得 Div 的寬高。這邊透過 $('.xxx').height() $('.xxx').width() 這種方式取得元素的高及寬，最後一樣加上 transition: all .5s ease 這樣動畫才跑得順！

關於 Select

我記得上課時校長才說如果你的設計師出了很多更改原本 Select 樣式的設計稿，記得去跟設計師吵一番討論，因為要強制改 Select 的內容是不大可能的，幾乎都要另外寫樣式才能；還好這次六角的設計師還夠有良心，沒有做下拉內部的設計，但是預設的箭頭樣式跟原本的差滿大的，先來一張原本 Select 的樣式照片。

預設樣式

這時我們大概就是只能更改 Select 的背景為白色，然後透過隱藏下拉的箭頭符號，自己替換上圖片或是 Icon 來達到外觀與設計稿一致，如果裡面想客製化不另外做成 Div 是不太可能了，總之我們先讓他 87% 像吧！

透過使用 appearance:none; 來隱藏預設下拉箭頭，如果怕瀏覽器不同語法支援程度也不同的話可以考慮改為下方範例，改掉箭頭，背景改為透明，取消預設邊框：

1
2
3
4
5
6
7
select {
  background-color: #ffffff00;
  border: none;
  appearance:none;  // 隱藏預設下拉箭頭
  -moz-appearance:none;
  -webkit-appearance:none;
}

這邊提供完整 CodePen 範例 2020春季網頁切版直播班 - 第五週作業範例 - 客製化Select：

關於輸入框

最後這個要稍微提一下，因為看到設計稿對話框框的的樣式不像是一般的 Input，所以這邊就採用了 contenteditable 這個屬性，他是一個可以讓你編輯元素的屬性，只要在 Element 上加上這個屬性即可編輯。

1
<div contenteditable></div>

但是我們要怎麽替 Div 加上 PlaceHolder 呢？這時候就要靠 CSS 來幫我們辦到這件事情了！

這邊我們會用到 Attribute selectors（屬性選取器） 來選擇，就是會用中括弧來選擇特定的屬性，透過 [contenteditable][placeholder] 來找到這個 Div 並在後面加上 :empty:before，代表內容是空的時候就加上偽元素，這樣是不是超方便的呀，例子就像下方這樣：

1
2
3
4
5
6
[contenteditable][placeholder]:empty:before {
  content: attr(placeholder);
  position: absolute;
  color: gray;
  background-color: transparent;
}

這邊提供完整 CodePen 範例 2020春季網頁切版直播班 - 第五週作業範例 - 土炮Input：

小組任務

任務一 - 請每個小組討論成員，試著載入 BS4 ，並作出 modal 效果

套用 Bootstrap 的 Modal 效果 點我

任務二 - 討論 HTML 裡的表格標籤(table、th、tr、td)的用法，請試著做出設計稿裡面的表格設計，並提供 codepen 來檢視

本次 Table 就是使用 HTML 裡的表格標籤，就不另外做了。

任務三 - 討論第五週版型該怎麼做

Conclusion & 結論

本週其實沒有太多需要一直爬文的特別內容，主要就是回歸到切版的部分，這也是為什麼本週我不使用 Bootstrap，自己覺得 Class Name 命名的部分還能再加油一點！

這次排版也幾乎都是使用 display: flex; 排版完成，因為不需要 RWD 所以排起來算輕鬆，但我想還是有許多可以改進的地方。

另外其實還是算有參考 Bootstrap 的表隔排版方式，自己最後又加上 thead 及 tbody，只能說 Bootstrap 真Ｄ神。

最後想知道 Flex 還是推薦可以參考我的前幾篇文章 -> [CSS Notes] - 第一次 Flex 就上手

Demo & 成果程式碼

Source Code：點我

Demo：點我

參考網站