ZK中使用JQuery Plugins

我剛接觸ZK Framework 時所使用的版本為3.6.1,開始使用ZK後覺得Component UI真的是太棒的,因為在接觸ZK Framewok 前都是使用HTML,沒什麼美術天分的我用HTML  Layout出來的畫面簡直慘不忍睹,ZK至少還能藉由美美的元件UI安慰自己美術的不足。

初期 ZK Framewok 使用的Client Engine為Prototype,直到了版本 5.0時ZK把Client Engine 改為 JQuery,先不講兩者間的差異性,就UI而言我個人覺得又是一次Component UI 的昇華,因為他的Component UI精美,讓我覺得現有能做出來的就已經很美觀很商業化了,於是忽略了將UI帶至天堂的JQuery Plugin。

就在昨天,我依舊坐在電腦前面,在寧靜且微暗的燈光下默默地想著朋友的案子,並且想著明天就是情人節了,依照慣例!身為去死去死團一定要祝福全天下情人都是失散多年的兄妹的阿!明天我打死也不要出門!也不上FB!還有誰能閃得了我~(诶?)阿對拉!我們要講的是JQuery,切回正題,菜逼八:【我想要未來的網頁要美!要好看!要Fashion! 】, 於是這兩天我走上了JQuery的不歸路…..在路上我遇到了 猴子…雞…還有狗…

好的!下面我們將介紹ZK使用JQuery Plugins的範例!(是否有點跳Tone XD)

首先我們要先學會取得DOM Object 、 DOM Obejct與JQuery Object轉換

取得 DOM Object 

ZK doc-Javascript 的 UI Compsing 小節提到

In addition, you can use jQuery to select a DOM element of a widget[2]. For example jq("@window") will select DOM elements of all window widgets. And,jq("$win1") will select the DOM elements of all widgets whose ID is win1. (see jq).

可以利用 jq(“@Window”)取得所有為Window “元件“的DOM element, 或者利用 jq(“$win1″) 取得所有”ID“為win1的DOM element。

 DOM Object JQuery Object 之間轉換

因jQuery物件只能使用 jQuery方法;DOM 物件只能使用 DOM 物件方法, 而在ZK中只提供了 jq() 拿取DOM Obj方法,但卻沒有提供拿取JQuery Obj的方法, 所以我們必須做DOM Obj與JQuery Obj之間的轉換

    • JQuery Obj    DOM Obj
    • DOM Obj  JQuery Obj

範例開始啦!!!

首先我們利用Eclipse建立一個ZK專案,名為【JQueryTest】
並且在WebContent中建立jqTest資料夾

接著我們下載 【Easy jQuery Modals dialog】的JQuery Plugin並壓縮至/WebContent/ jqTest/LightBox中

接著我們在/WebContent/jqTest/LightBox中建立個zkDemo.zul檔案

再依照Easy jQuery Modals dialog官網給的步驟依序實作在zul上

Step 1: Attach Needed Files (連結所需檔案)   :  

Step 2: The Modal Markup(標註要使用LightBox效果元件)

我們利用zul的div元件當 【LightBox】,
並且利用ToolbarButton當關閉按鈕,
這邊ToolbarButton只需要指定style class為close-reveal-modal,
就會有關閉事件,關閉事件寫在 jquery.reveal.js 中

 

Step 3: Attaching Your Handler (加上驅動元件)

第4行:宣告命名空間 ca = Client/Attribute,用於在ZUL元件上自訂 HTML Attribute

第9行:我們利用 zk button 來當驅動元件
在官網上則利用 <a href=”#” data-reveal-id=”myModal”>Click Me For A Modal</a>
他自訂了一個 HTML Attribute = 【data-reveal-id=”myModal”】
而zk 元件要自訂 HTML Attribute 就必須透過 第4行宣告的命名空間來宣告

Step 4:事件驅動

第18行: zk.afterMount() 用來取代官方的 $(document).ready(),因為在ZK中無法使用 $(document).ready()

第19行:正如我們剛開始介紹的,抓取所有button元件的 DOM element並監聽onClick事件

第21行:得取元件的HTML Attribute 存入變數 modalLocation

第22行:恩…看似有點複雜!沒關係~我們拆開來一個一個看 先看 $(jq(“$”+modalLocation))他的最外圈是一個  $( )   裡面包的是  jq(“$”+modalLocatiom) ,分析完以後我們都知道程式是先執行最深的函式依序往最外層執行,所以他會先執行  jq(“$”+modalLocation) 我們把本例子中的 modalLocation 變數帶進來該式子就會等於 jq(“$myModal”),經由一開始介紹的取得 DOM Object ,我們知道 jq(“$myModal”)是代表著拿取ID為myModal的 DOM Object,再來最外圈的$( )就是要做 DOM Obejct與JQuery Object 轉換,總結就是先抓取 DOM Object 再將 DOM Object 轉換為 JQuery Object。

 

Finally 給予reveal 參數

Easy JQuery Modals dialog 最後提到你可以給予不同的參數,達到你想要的效果他提供了以下兩種方法

1.直接給予 reveal 參數

2.在元件中自訂HTML Attribute

 

舉個例子我想要效果元件利用Fade方式出現、速度為1000毫秒

程式碼可以改寫為

 

結語:
整合工具本來就要花很多的心思,在 ZK中使用JQuery的部分極少中文參考文件,在整合使用的研究過程中,不僅提升了自己對於程式相關知識的廣度以外,並且提升了對程式的敏感度,再來就是得到了無比的成就感,程式對於我而言就好比遊戲一樣,他有著各種不同的關卡,當每破一關,即代表著你得到了更強的武器,當你全身+9裝的時候自然可以打大魔王,程式的世界裡沒有絕對的大魔王只有相對的大魔王。

再來很感嘆的就是,在台灣這社會,討論程式並不熱烈,除了幾個知名的論壇有厲害的版主在回答問題以外,幾近所有的解決方案以及例外處理有8成以上都是外國人所撰寫、回答。當然有可能是因為大部分人看完文章後得到想要的資訊後就離開了,並沒有給予分享者一個正向的鼓勵、支持,導致在台灣厲害的人發分享文越來越少了,但不可否認外國人看原文技術文件的速度快我們太多了,主場優勢沒辦法,哈哈!

References by

JQuery Free Plugin 載點(雖然標榜免費,若要做商業用途的還是要注意一下 Lisence)

    • jQuery Plugins

 

    • HtmlDrive

 

 

2 comments

  1. 個人本身也是ZK愛好者

    常常因jQuery外掛在ZK上很難嵌入感到挫折感大增

    看過這篇非常實用文章~

    自己功力想必提升不少

    遇到相關問題也可以迎刃而解

Leave a Reply

你的電子郵件位址並不會被公開。 必要欄位標記為 *