2008/09/03

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 效果的文字,存檔後可以看到效果。

No comments: