開始之前,您必須先完成練習 3.1:匯入必要的資源。
標籤畫面元件利用 JavaScript 來支援瀏覽器中若干重要的用戶端事件。 如果您選取標籤畫面(選取標籤區),快速編輯視圖中會出現下列事件:
事件 |
說明 |
---|---|
onpanelenter |
當進入標籤畫面控制項中的任何畫面時,會呼叫這個事件。 這使得網頁開發人員能夠新增這個事件的任意商業邏輯、驗證使用者輸入的資訊,以及準備畫面所要顯示的資訊。 |
onpanelexit |
當結束標籤畫面控制項中的某畫面時,會呼叫這個事件。 這使得網頁開發人員能夠新增這個事件的任意商業邏輯、驗證使用者輸入的資訊及拒絕離開畫面,或控制進入下一畫面的流程。 這個事件非常重要,因為當在精靈模式(含「下一步」和「上一步」按鈕,而不是標籤)中使用標籤畫面時,它可用來建立複式流程。 |
oninitialpanelshow |
當 UI 第一次顯示標籤畫面控制項時,會呼叫這個事件。 |
onfinish |
當使用者按啟用的「完成」按鈕時,會呼叫這個事件。 這使網頁開發人員能夠新增這個事件的商業邏輯,比方說,驗證使用者輸入的資訊。 |
oncancel |
當按下「取消」按鈕時,會呼叫這個事件。 |
對於 OnCancel 和 OnFinish 事件,您只應併入驗證可以送出或取消標籤畫面的邏輯,再採取適當動作。 請勿從這些處理常式送出表單,因為組織架構會自動完成這個動作。
如果您按一下給定畫面中的空白區域,您會見到下列事件。
事件 |
說明 |
---|---|
onenter |
當進入所選的畫面時,會呼叫這個事件。 這個事件的行為完全如同廣域 onpanelenter 事件,不過,它是針對給定畫面,可讓開發人員指定這個畫面專用的邏輯。 |
onexit |
當結束所選的畫面時,會呼叫這個事件。 這個事件的行為完全如同廣域 onpanelexit 事件,不過,它是針對給定畫面,可讓開發人員指定這個畫面專用的邏輯。 |
如果在本端環境中,指定給定畫面的處理常式,且廣域事件也有處理常式,會先呼叫專用的處理常式。如果它在 OnExit 上傳回非空值,或在 OnEnter 上傳回 true 值,將會呼叫廣域處理常式。
要訣:當您在快速編輯視圖中選取某事件,再按一下程式碼畫面,您會見到一些註解,說明事件目的、參數及其預期的傳回類型和值。
如果您需要自訂標籤畫面的外觀與操作方式,請編輯稱為 tabpanel.css 的預設階式樣式表 (CSS)。 您可以在「專案導覽器」中,找到專案中的這個檔案,位置如下:/WebContent/theme/tabtree.css。
現在您已準備好開始進行練習 3.3:新增樹狀結構元件。