Tagged under: , , , ,

弱格改版型計劃.兼聊 mootools 及 jquery 並存之道

image

計劃過完年後換新的版型,目前暫時將新的版型架在弱格貝塔,請大家給點意見。

可能會把分類整理一下,一些雜亂的小東西能不裝的可能就不裝了,新年總要有個新氣象的,換新換新嘛。

因為新的版型有用到 mootools,稍微搜尋了一下 mootools 和 jQuery 共存的方法:

<script src="Mootools.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();  
jQuery(document).ready(function($){
......
});
// Use Prototype with $(...)
$('someid').style.display = 'none';
</script>

總之就是用 jQuery.noConflict(),然後使用標準語法去寫 jQuery 的 Code,以區別 mootools 的 Code,這樣就可以和平共存了!

後記:事實上也只能解決一半,猜是 Smoothgallery 和 Fancybox 的 Code 還是有衝,只能讓 Fancybox 的單張圖片做燈箱特效,但 Gallery 顯示就沒輒了,努力研究當中。

再後記:後來燈箱是改用 colorbox,輪播改用了 nivoSlider

16 回應:

  1. 新版型看起來很漂亮 ~ ^^

    回覆刪除
  2. @Froch,還有一些問題,還得慢慢改。

    回覆刪除
  3. 版主你好,我想請問幾個問題。
    1.你的新版面,我用火狐4看不到精選輪撥的內容,但ie看的到。
    (不知是不是我的問題)
    2.這個版面如果不裝Fancybox 的話,Smoothgallery可以在這版面正常顯示嗎?
    3.如果可以要怎麼改,因為我用你上面的語法貼了懷是不能正常使用。

    回覆刪除
  4. Re: 消失的幻影
    1.我剛才用 Firefox 4 試是可以的,我就不知道是什麼問題,感謝回報,我會再測試看看。(sites.google.com 好像很慢,我的 js 是放在那裡,所以這是可能的原因)

    2.3.我建議你可以直接到 http://www.premiumbloggertemplates.com/ 去抓使用 smoothgallery 的版型來套用,smoothgallery 用的是 mootools,我的目的是要在那樣的環境下加入 jQuery 的話,才需要用上面的語法,所以如果你只需要純 mootools 的環境,我建議還是先抓單用 mootools 的版型來改會比較快,要加 jQuery 程式的時候再記得加 noConflict()。

    我挑其中一個版型你參考裝看看:http://www.demo.premiumbloggertemplates.com/2011/05/notion-blogger-template-demo.html

    回覆刪除
  5. 另外我現在用的輪播也不是原來版型用的 jQuery Plugin 了,我改用了 nivoSlider。

    回覆刪除
  6. 先感謝您快速的回答。
    另外
    1.其實我也是在那找版型的,但像你推薦的版型就是我要的,但因為我想裝側邊的多重Tab view,這類型的都沒有,但像你用的這類有。我把2者合一後,就遇到了mootools 和 jQuery的問題了。

    2.我知道你改用了nivoSlider,我有去下載,不過他下載下來的檔案沒說明
    區塊<div 的說明,請問有要特別設命名的id嗎?(怕 jQuery有設定)
    因為我看不懂jQuery。

    回覆刪除
  7. Re: 消失的幻影 <5195653580050587162>
    1.我個人是比較常用 jQuery,但 mootools 就不熟,所以我是挑 jQuery 的版型為主,不過我有另一個格是同時存在 mootools 和 jquery 的,用 jQuery.noConflict(); 是 OK 的。
    (http://jimmyyen-lab.blogspot.com/)

    2.ID 可以自己定義,$('#slider').nivoSlider();
    nivoSlider 的文件:http://nivo.dev7studios.com/#usage

    回覆刪除
  8. Re: 消失的幻影 <5195653580050587162>
    我找時間寫一下 nivoslider 的說明,你再參考看看。

    回覆刪除
  9. Re: 消失的幻影 <5195653580050587162>
    寫好了,你參考看看:
    http://jimmyyen.blogspot.com/2011/06/blogger-nivoslider.html

    回覆刪除
  10. 再次感謝你,回答的很詳細,對我真的幫助很大。(原諒我不懂又問很多)
    1.另外我去你的另外一個部落格看了原始碼了,
    不過我看不到你說的mootools ,不是應該會要載入類似
    script src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js' type='text/javascript'/嗎?

    2.我看你是把jQuery.noConflict(),放到你要執行的ColorBox程式裡,
    所以是衝到的每支程式都要改囉,而不是找一個地方貼你上面那段程式是嗎?
    (也就是說(jQuery 的版型)的就改要執行mootools的程式,(mootools 的版型)就要改執行jQuery的程式,不知這樣說對不對。
    不太理解你用的Fancybox、ColorBox不是都是jQuery程式,那在 (jQuery 的版型)也要改,對不起我搞不太懂其中的邏輯,可以在說明一下嗎?


    3.其實Smoothgallery 的顯示效果,我覺得真的很好看,所以一直想整合,
    所以想請問如果用跟你類似的模板(jQuery 的版型),但想要Smoothgallery加上你側邊用的三重 Tab view,會要改很多程式碼嗎?如不會可以教我嗎?
    (要改很多jQuery的碼的話,就不用教我了謝謝)

    回覆刪除
  11. Re: 消失的幻影 <1263321256403833614>
    1. 我是用 jsapi 載入 mootools 的
    google.load("mootools", "1.3.1");

    2.只要是 jquery 的 plugin 或者用 jquery 寫的,一律要用標準寫法 jQuery(.....),我的建議是你先裝 mootools 的版型,然後再加 jquery 的 tabview 或者查查看有沒有用 mootools 寫出來的 tabview 寫法,這樣都可以用 mootools 的寫法來寫。

    3.所以我看你先裝用 mootools 的版型,我也會試裝一個來試試看寫 tabview 進去,到時候我再把 code 給你參考。

    回覆刪除
  12. 版主你說的我大致了解了。(感謝你迅速又精準的回答)
    1.我剛又仔細看了你的部落格,果然是我漏看了你是用你說的方法載入
    (我是用 jsapi 載入 mootools 的google.load("mootools", "1.3.1");)
    2.你的意思應該是說不管用mootools或jquery 版型,只要是要用到jQuery.noConflict()就都是要修改成jquery 一律要用標準寫法 jQuery(.....)沒錯吧。
    3.另外請問jquery跟mootools是jquery比較多人使用,算主流是嗎?(也就是說要找教學或hack比較容易是嗎)?

    回覆刪除
  13. Re: 消失的幻影 <7908749572037035128>
    1.:D
    2.其實也有很多寫法,但我習慣用我說的這種,就是把 $() 改成 jQuery() 這樣,詳細文件看:http://api.jquery.com/jQuery.noConflict/ 也可以參考那裡的寫法。

    回覆刪除
  14. Re: 消失的幻影 <7908749572037035128>
    3. 純粹個人先選擇 jQuery 學習,當然你說的資源比較豐富也是原因之一。

    回覆刪除

回應不用錢,請多多益善!懶得寫字按個讚也是相當感謝!