應該要算是很高興才對吧!!因為這次專案的UI實作真正遭遇兩大UI Library(jQuery v.s Prototype)共處在一起時對於$ 這個變數定義的衝突的問題與因應之道的寶貴經驗!!
由於頁面上在User互動性設計的考量下,兩年前PG就自行Plugin Prototype framework。而最近普遍使用到的thickbox效果,在"效果的完整性"、"跨瀏覽器相容"及"User接受度"三大考量之下,首推jQuery的thickbox Library最完整。正如"jQuery in Action"書上所言,這兩大UI Framework遭遇了"$"使用衝突的混淆問題,造成某一效果無法正常work。
正如書上所提,可以透過下列三種方式解決:
1. jQuery.noConflict();-->可將$名稱控制權歸還給Prototype。在此宣告之後,必須使用jQuery名稱來呼叫jQuery的特性。
2.用(function($){
//jQuery 程式碼區塊
})(jQuery);
3.宣告一變數值為jQuery的變數,之後使用該變數取代$的使用。
最佳的方法是第一種方式,在宣告jQuery.noConflict();之後,將thickbox.js裡面的$都取代成jQuery。
特別注意的是要逐一找出、取代,不要"全部取代"。因為thickbox.js裡有javascript的$符號,這種可不能取代,否則無法正常work!!
第二種方法最為快速,但風險相對較大。因為在包覆的jQuery 程式碼區塊裡,若有非jQuery使用的$,也會被取代,造成無法正常work!!
第三種全域變數的宣告,可能也會影響到Prototype,造成無法正常運作!!
補充說明:
1.切記務必將jquery的js檔案放在prototype的js檔案前面(瀏覽器先讀jquery的js檔案再讀prototype的js檔案)。
2.在jquery.js後面緊接著宣告避免掉 $() 衝突的問題。如下面例子:
‹script type="text/javascript" src="http://www.fetnet.net/estore/minisite/js/jquery-latest.pack.js›‹/script›
‹script›jQuery.noConflict();‹/script›