jQuery Example on Plone

jQuery 是一套 JavaScript 函式庫，可用來處理動態網頁或 AJAX 技術。台灣有 jQuery 中文社群今年六月剛在 http://groups.google.com/group/jquery- 成立討論區。

如何讓 CMS 結合 jQuery 之類的技術呢? 在 David Bain 的示範影片，可以看到 Plone3 製作 Fade In 文字效果的步驟。對新手而言，影片內容過於簡略，我把實作過程的細節補充於此。

設定 Kupu 的 Character Style

進入 Site Setup 點選 Visual editor，在 Styles 區塊裡新增 Fade In 選項並存檔，格式和內容如下：

Fade In|span|fadeIn

建立並註冊 javascript 程式

進入 ZMI 點選 portal_skins 到 custom 目錄，新增 DTML Document 設定 id 為 custom-jquery.js 點選 Add and Edit，在方框裡填寫如下內容並存檔：

jq(document).ready(function(){
  //
    jq('.fadeIn').fadeIn(10000);
});

範例中的「jq」就是 Plone 裡 jQuery 控制符號。

進入 ZMI 點選 portal_javascripts 在 Add a new script 方框裡設定 id 為 custom-jquery.js 按 Add 鈕，再把 Debug/development mode 選項打勾按 Save 鈕。

新增 CSS 設定值

進入 ZMI 點選 portal_skins 的 plone_styles，再點選 ploneCustom.css 裡的 Customize 鈕，在方框裡加入下列內容並存檔：

.fadeIn {
  display: none;
}

點選首頁 Edit 在 Body Text 方框裡選取想要設定 Fade In 效果的文字，存檔後可以看到效果。