《HTML5 完美風暴》第二版第二十六章便利貼

HTML5 完美風暴(第二版)

便利貼26

26-2

HTML5 完美風暴

26.1 功能導覽便利貼狀態

清空操作

26.2 網頁配置

26.3 功能實作create_a_pad 與建立便利貼

隱藏與關閉便利貼

新增

檢視便利貼清單

隱藏所有便利貼

關閉所有便利貼

SUMMARY


11.1　進入 HTML5 之前必須瞭解的事實

26-3

便利貼

HTML5 完美風暴 PART 1

第二十六章


便利貼26

26-2

針對 HTML5 規格中的 Web Storage API ，此案例透過一個可直接線上執行的便利

程式進行實作應用示範。

26.1 功能導覽同前一章所討論的「塗鴉板」，此案例是單一網頁應用程式，提供模擬便利貼功

能的線上服務，以下是一開始網頁的載入畫面：

第一次使用這個服務，會預先載入一張便利貼紙，在上面按一下即可切換至輸入

狀態，於其中輸入任意文字：

　

左圖是輸入的操作畫面，完成輸入之後，按一下「確認」按鈕，即可儲存便利貼

的內容，如右圖。

HTML5 完美風暴(第二版) 26-3

26.1　功能導覽

即便關閉瀏覽器，下次重新開啟會看到相同的內容。如果要再增加一張便利貼，

於上方的「新增一張便利貼」按鈕按一下即可新增一張，每按一次均會執行相同

的動作，例如以下的畫面：

這個畫面是按了兩下「新增一張便利貼」按鈕的結果。每一張便利貼上方有一塊

黑色區域，其中顯示目前所建立的便利貼編號與新增便利貼的時間資訊，還有隱

藏（－）或是關閉（X）便利貼的按鈕，以滑鼠按住便利貼上方的黑色區域，可

以任意移動便利貼。

這個畫面是將便利貼拖曳至方便檢視的適當位置，並且逐一輸入欲提醒的特定

事，並且進行儲存。


便利貼26

26-4

便利貼狀態

此服務支援三種便利貼狀態切換以方便管理，分別是「隱藏」、「關閉」與「移

除」：

隱藏：將便利貼從畫面上隱藏，進入此狀態的便利貼不會出現在畫面 ▪上，但是可以被重新貼出來並進行修改。

關閉：便利貼進入關閉狀態，即無法顯示在畫面上，亦無法被修改，只 ▪能在歷史記錄裡面檢閱查詢。

移除：嚴格說來，這不是一種狀態，而是一筆便利貼記錄，被完全從電 ▪腦移除，無法查詢。

針對每一張便利貼，於其上方黑色的標題區域中，按一下隱藏（－）按鈕，即可

令此便利貼進入「隱藏」狀態，此時便利貼會消失，只能從記錄清單畫面中檢視

或是重新貼出來，如果按下關閉（X）便利貼按鈕，此張便利貼切換至「關閉」

狀態，再也無法出現在畫面中，只允許查詢。

如果要查詢便利貼的狀態，可以按下畫面上方的「檢視便利貼按鈕」，會切換至

以下的檢視畫面：


畫面上出現兩個清單，左邊是目前使用的便利貼清單，每一個方格對應至一個便

利貼的內容，方格的左上角顯示目前便利貼的記錄，藍色表示便利貼是顯示狀

態，如果是灰色，則表示便利貼目前被隱藏。右邊的清單則顯示已經關閉的便利

貼記錄，由於目前沒有被關閉的便利貼，因此這個清單內容是空的。

在非清單區域按一下，回到原來的畫面，於編號 1 的便利貼上按一下「－」按鈕

將其隱藏：

此張便利貼將會被隱藏而消失：

現在於編號 2 的便利貼上按一下「X」將其關閉，由於關閉後的便利貼無法再被

顯示只能查詢，因此會出現警告訊息：

26.1　功能導覽


便利貼26

26-6

如果按下「確定」按鈕，此便利貼同樣被隱藏，但是進一步切換至關閉的動態，

按一下「檢視便利貼清單」，現在畫面如下：

其中編號 1 的便利貼其左上角的方塊變成灰色，表示目前這張便利貼是隱藏狀

態，只要在上面按一下就可以重新將其顯示出來，右邊的清單，則顯示已經關閉

的便利貼，其編號為 2 ，如果在右上角的「X」按一下，就會永遠移除這個便利

貼，如下頁圖：


便利貼一旦移除將永遠消失，因此會出現警告訊息，如果按下其中的「確定」按

鈕，此便利貼將永遠清除。

清空操作

經過上述的說明，讀者瞭解便利貼有三種狀態，使用者可以針對特定便利貼進行

狀態的切換，而這個服務也針對所有便利貼的狀態，提供一次完全切換的功能：

畫面上方右邊的三個按鈕，分別於使用者按下時，執行按鈕上標示的動作。第一

個按鈕按下將隱藏所有的便利貼，第二個按鈕按下除了隱藏所有的便利貼，同時

將其狀態切換至關閉，最後一個按鈕則將所有的便利貼從記憶體中移除，無法回

復亦無法查詢。

26.1　功能導覽


便利貼26

26-8

26.2 網頁配置網頁的配置相當簡單，除功能按鈕外，只有動態新增便利貼的區域，內容如下：

<body id='padBody'> <header> <div> <button id="newPadButton" onclick="newpad()"> 新增一張便利貼 </button> <button id="listItem" onclick="listPadItem()" > 檢視便利貼清單 </button> <button id="hideAll" onclick="hideAllpad()" style="margin-left:60px;"> 隱藏所有便利貼 </button> <button id="deleteAll" onclick="deleteAllpad()"> 清空所有便利貼 </button> <button id="removeAll" onclick="removeAllLocalStorage()"> 移除所有便利貼 </button> </div> </header> <div id='mainarea'> <div id="padarea"> </div> </div>

</body>

其中 id 屬性設定為 padarea 的 <div> ，為便利貼的操作區域，當便利貼出現時都

顯示在這裡，請注意其中的五個按鈕，分別執行其相關的函式以支援便利貼的各

種操作功能。

26.3 功能實作便利貼的功能實作集中在畫面上方五個功能按鈕，以及單一便利貼上的「隱

藏」與「關閉」按鈕，配置兩個 JavaScript 檔案進行處理，功能如下表：

JavaScript 檔案說　　明

pad.js 實作便利貼管理維護功能。

switchState.js 實作便利貼狀態的切換功能。

這個案例以 localStorage 物件儲存便利貼資料，其中的 localStorage['padNO'] 表示目

前的便利貼數量，而針對每一張便利貼設定一個流水編號 n ，並且將其相關的內

容，以 JSON 格式，建立專屬的 localStorage['padNO'+n] 進行儲存。

Documents

《HTML5 完美風暴》第二版第二十六章便利貼