在 Adobe Dreamweaver 中使用 JavaScript 行為以在文件中放置 JavaScript 程式碼,讓瀏覽者可以變更網頁或起始某些工作。

Adobe Dreamweaver 行為會在文件中放置 JavaScript 程式碼,讓使用者可以用各種方式變更網頁或起始某些工作。行為是事件和該事件所觸發動作的組合。在「行為」面板中,您可以先指定動作,然後再指定觸發該動作的事件,行為新增至頁面。

註解:

行為程式碼是用戶端的 JavaScript;也就是說,它是在瀏覽器中,而不是在伺服器上執行。

「事件」實際上是瀏覽器所產生的訊息,表示您網頁的瀏覽者進行了某些動作。例如,當瀏覽者將指標移動到連結上時,瀏覽器便會為該連結產生 onMouseOver 事件;接著,瀏覽器會檢查是否應該呼叫某些 JavaScript 程式碼 (在檢視的頁面中所指定) 做為回應。 不同事件將因不同頁面元素而定義;例如,在大多數瀏覽器中,onMouseOveronClick 事件是與連結相關聯,而 onLoad 則是與影像和文件的 body 區段相關聯。

「動作」是為執行某項工作而預先撰寫的 JavaScript 程式碼,例如開啟瀏覽器視窗、顯示或隱藏 AP 元素、播放聲音,或停止 Adobe Shockwave 影片。Dreamweaver 所提供的動作可提供最大的跨瀏覽器相容性。

在您將行為附加到頁面元素之後,每當某個事件因該元素而發生時,該行為便會呼叫已與該事件產生關聯的動作 (JavaScript 程式碼),而可以用來觸發既定動作的事件會因瀏覽器而不同。例如,如果您將「彈出訊息」動作附加到連結,並指定由 onMouseOver 事件來觸發,那麼每當有人將指標放在該連結上時,您的訊息便會彈出。

單一事件可以觸發數個不同動作,而且您可以指定那些動作發生的順序。

Dreamweaver 提供了約二十幾種動作;其他動作可以在 Exchange 網站 www.adobe.com/go/dreamweaver_exchange_tw 以及協力廠商開發人員網站上找到。如果精通 JavaScript 的話,您可以撰寫自己的動作。

註解:

「行為」和「動作」這兩個詞彙是 Dreamweaver 詞彙,而不是 HTML 詞彙。 從瀏覽器的觀點來看,動作就跟任何其他 JavaScript 程式碼的片段一樣。

行為面板總覽

您可以使用「行為」面板 (「視窗>行為」),將行為附加到頁面元素 (更精切地說是附加到標籤),並修改先前所附加之行為的參數。

已經附加到目前所選取頁面元素的行為會出現在「行為」清單 (面板的主要區域),並依事件的字母順序列出。如果相同的事件列出了數個動作,則動作將依它們在清單中顯示的順序來執行。如果行為沒有顯示在行為清單中,就表示沒有行為曾經附加到目前所選取的元素。

「行為」面板具有下列選項:

顯示設定事件

只會顯示已附加到目前文件的事件。事件會整理到用戶端或伺服器端的類別中。每個類別的事件會以可收合的清單顯示。「顯示設定事件」是預設的檢視。

顯示全部事件

會以字母順序顯示指定類別中所有事件的清單。

增加行為 (+)

會顯示可以附加到目前所選元素的動作選單。當您從這個清單選取動作時,會出現一個對話方塊,您可以在其中指定動作的參數。如果所有動作都呈現灰色,表示選取的元素不會產生任何事件。

移除事件 (–)

會從行為清單中移除選取的事件和動作。

向上和向下箭頭按鈕

可在特定事件的行為清單中,上下移動所選取的動作。您只能為特定事件變更動作的順序;例如,您可以為 onLoad 事件變更數個動作發生的順序,但所有 onLoad 動作都會在行為清單中放置在一起。對於無法在清單中上下移動的動作,箭頭按鈕便會停用。

事件

顯示可觸發動作之所有事件的彈出式選單,此選單只有在選取事件時才會顯示 (當您按一下所選取事件名稱旁邊的箭頭按鈕時,便會顯示此選單)。根據選取的物件不同,會出現不同的事件。如果您預期的事件沒有顯示,請確定所選取的是正確的頁面元素或標籤 (若要選取特定標籤,請使用「文件」視窗左下方的標籤選取器)。

註解:

括號中的事件名稱只供連結使用;只要選擇其中一個事件名稱便會自動將 Null 連結新增到選取的頁面元素,並附加行為至該連結,而非元素本身。Null 連結在 HTML 編碼中指定為 href="javascript:;"。

關於事件

每一個瀏覽器都會提供一組事件,您可以將這些事件與「行為」面板的「動作」(+) 選單中所列的動作建立關聯。當網頁的瀏覽者與網頁互動 (例如按一下影像) 時,瀏覽器便會產生事件,那些事件可以用來呼叫執行動作的 JavaScript 函數 Dreamweaver 提供許多可以和這些事件一起觸發的常用動作。

如需各瀏覽器所提供的事件名稱和描述,請參閱「Dreamweaver 支援中心」,網址為:www.adobe.com/go/dreamweaver_support_tw

根據選取的物件不同,「事件」選單會出現不同的事件。若要查明指定瀏覽器支援指定頁面元素的哪些事件,請將頁面元素插入您的文件,並將行為附加至該元素,然後查看「行為」面板中的「事件」選單 (根據預設,事件是由 HTML 4.01 事件清單所繪製,而且大部分的新型瀏覽器都支援這些事件)。如果相關物件還沒有存在於頁面,或者選取的物件無法接受事件的話,事件可能停用 (暗淡顯示)。如果預期的事件未出現,請確認是否已選取正確的物件。

如果您正在將行為附加到影像,則有些事件 (如 onMouseOver) 便會出現在括號中。這些事件只供連結使用。當您選取其中一個事件時,Dreamweaver 會在影像前後加上 <a> 標籤,以便定義 Null 連結。Null 連結在「屬性」檢視窗的「連結」方塊中,會以 javascript:; 來呈現。如果想要將連結值變成到其他頁面的實際連結,您可以變更它,但如果您刪除 JavaScript 連結而不以其他連結來取代,這時便會移除行為。

若要查看在指定瀏覽器中,哪一個標籤可以與指定事件一起使用,請在 Dreamweaver/Configuration/Behaviors/Events 資料夾的其中一個檔案中搜尋該事件。

套用行為

您可以將行為附加到整個文件 (也就是到 <body> 標籤中),或是連結、影像、表單元素,或幾個其他的 HTML 元素。

您選取的目標瀏覽器,將會決定哪些事件會用來支援特定的元素。

您可以為每一個事件指定一個以上的動作。動作將依它們在「行為」面板的「動作」欄中所列出的順序來發生,但是您可以變更該順序。

  1. 請在頁面上選取元素,例如影像或連結。

    若要附加行為到整個頁面,請在「文件」視窗左下方的標籤選取器中按一下 <body> 標籤。

  2. 選擇「視窗>行為」。
  3. 按一下加號 (+) 按鈕,並從「增加行為」選單中選取動作。

    您無法選擇選單中呈現灰色的動作。它們可能是因為目前文件中必要的物件並不存在,所以才會呈現灰色。例如,如果文件中未包含 Shockwave 或 SWF 檔,「控制 Shockwave 或 SWF」動作便會呈現灰色。

    當您選取動作時,便會顯示一個對話方塊,其中顯示該動作的參數和指示。

  4. 輸入動作的參數,然後按一下「確定」。

    Dreamweaver 中提供的所有動作都可以在最新的瀏覽器中運作。儘管有些動作無法在舊版的瀏覽器運作,但是還不至於出現錯誤。

    註解:

    目標元素需要唯一的 ID。例如,如果您希望將「調換影像」行為套用至影像中,則該影像需要一個 ID。如果元素沒有指定 ID,Dreamweaver 會自動為您指定一個。

  5. 要觸發動作的預設事件會在「事件」欄中出現。如果這不是您所要的觸發事件,請從「事件」彈出式選單中選取其他的事件 (若要開啟「事件」選單,請在「行為」面板中選取事件或動作,然後按一下顯示在事件名稱和動作名稱之間指向下方的黑色箭頭)。

變更或刪除行為

附加行為之後,您可以變更觸發動作的事件、新增或移除動作,以及變更動作的參數。

  1. 選取有附加行為的物件。
  2. 選擇「視窗>行為」。
  3. 進行所要的變更:
    • 若要編輯動作的參數,請按兩下其名稱,或選取它再按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh);然後在對話方塊中變更參數,並按一下「確定」。

    • 若要為指定事件變更動作順序,請選取動作,並按一下向上或向下箭頭。或者,您也可以選取動作,然後將它剪下並貼到其他動作中所要的位置。

    • 若要刪除行為,請選取該行為,並按一下減號 (–) 按鈕,或是按 Delete 鍵。

更新行為

  1. 選取有附加行為的元素。
  2. 選擇「視窗>行為」,並按兩下該行為。
  3. 進行變更,然後在行為的對話方塊中按一下「確定」。

    在那頁面中該行為的所有出現項目都將被更新。如果您網站上的其他頁面也有此行為,您必須逐頁更新此行為。

下載和安裝協力廠商行為

您可以在 Exchange for Dreamweaver 網站 (www.adobe.com/go/dreamweaver_exchange_tw) 上取得許多擴充功能。

  1. 選擇「視窗 > 行為」,並從「增加行為」選單中選取「取得更多行為」。

    您的主要瀏覽器會開啟,然後出現 Exchange 網站。

  2. 瀏覽或搜尋套件。
  3. 下載並安裝您想要的擴充套件。

如需詳細資訊,請參閱「在 Dreamweaver 中加入和管理擴充功能」。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策