八、第三方Plugin

8-48 使用第三方 plugin 需要注意的細節

  • 熱門瀏覽器有無支援，至少支援 IE9

  • 確保該載入的 CSS、JS、IMG，都有載入

  • 如果發現問題，打開 Console 除錯

  • 查詢 Plugin JS 的預設設定

  • 修改 CSS 成自己的樣式

8-49 lightbox、nivoslider

同學們好：

接下來後面章節會講解關於 lightbox、nivoslider 的圖片動畫效果，

目前這兩個套件可以兼容於 jQuery 2.x 的版本，但在支援目前最新的 3.x 版本時會有些問題，

所以會建議各位同學先下載課程範例程式碼的 jQ 核心進行練習，瞭解插件的整合脈絡學習效果會更好些哦 :D

8-50 Lightbox 2 - 圖片燈箱效果(上)

8-51 Lightbox 2 - 圖片燈箱效果(下)

可以自行查看 lightbox 的 css 和 js 碼，並進行修改

8-52 Nivo Slider - 圖片輪播效果(上)

8-53 Nivo Slider - 圖片輪播效果(下)

左右滑動幻燈片效果

8-54 slider + nivo 整合

hi 各位同學：

下個影片則會請您將兩個插件合併在一起，

但由於目前 lightbox 有用到 jQuey 3 以上新的核心，

這會導致 nivoslider 的 jQuery 支援版本不相容，

解法也很簡單，請將原本載入 nivo 這段語法從原本這樣

   $(window).load(function() {
      $('#slider').nivoSlider();  
  });

改成下面這樣就可以運作嘍，再請試試看，這部分也在下部影片夾帶的範例程式碼有提供嘍。

   $(window).on('load', function(){  
    $('#slider').nivoSlider(); 
  });

8-55 將上面的效果試著整合在一個網頁中吧！

https://thimble.mozilla.org/zh-TW/user/ayugioh2003/1779147 ​這是我在這一節的作業，請老師幫忙查看了 謝謝老師 呈現網址: https://thimbleprojects.org/ayugioh2003/510238/​​ 檔案下載連結: https://drive.google.com/drive/folders/1lXPntINx9vu0phwTMwtn1sU_Cz9Ds197?usp=sharing​​ 另外想請問一些事情

  • 想問老師當初在命名 cart 時，在語意結構上是什麼意思？購物車的意思嗎？

  • 如果單純就這一節的練習來說，把 '.content>.cart>ul' 的結構改成 'ul.content.cart'，是不是也不會影響呈現的結果？

  • 從 lightbox 下載的檔案中，好像有添加 jQuery 的 js 版本，以及單純提供 lightbox 功能的 js版本。不過老師給的範例網頁，有同時引入 jQuery2.2.3 和 lightbox-plus-jquery 這兩支 js，想問說是不是引用其中一支就好了？

回饋

  • 我在作業中用了 jQuery3.3.1，發現同時使用 lightbox(沒 plus jQuery 的版本) 和 nivo 是沒問題的 (看起來啦)。只是想在 all.js 引用 nivoSlider 的函式的話，需要照老師在上一節提到範例碼的修改

   $(window).on('load', function(){  
    $('#slider').nivoSlider(); 
  });

8-56 Peity - 無痛設計網頁圖表資訊

有辦法做成複合式的圖表嗎?

  • 這圖表是有辦法的，

  • 但是你必須先瞭解 JavaScript 如何來儲存資料才有辦法使用這種圖表，例如 JS 物件與陣列，

  • 這段會在你修到「JavaScript 學徒的試煉」才會比較好能理解哩 :D

  • 例如 chart.js~

老師我們一般製作圖表時，都會將資料（文字或者數值）放在圖筆上面，如果想要製作一個如下的圖片的話該怎麼寫呢？？

其他

8-57 教你如何管理多個 jQuery Plugin

在 index.html 先載入 css，再載入 js jQuery 核心先載入，再載入第三方插件 js 寫 JS 時邊註解會比較好懂 有問題時，用 Chrome 的開發工具看哪行程式碼錯惹 有些 JS 是要 DOM 載入完成才會有效果

8-58 如何去查詢別人使用的 jQuery 查件

我想做跟上面範例一樣的履歷表,工作經歷的部分,但我找不到那個Plugins是哪個..可以請教老師嗎~謝謝您

  • 這個時間軸履歷是用純 css 寫的，在 codepen 上就有很多範例，幫你找了下可以看此連結哦 :D

  • CodePen Search

老師你好，我想問如果載入多個三方插件，可是每個插件使用的jQuery版本都不同，版本沒有互相支援，該怎麼去做統整? 1.先確認網站要幾個插件，並尋找插件 2.確保某 jQuery 版本可以兼容所有插件 3.如果 第二點沒辦法全部兼容，請找一個版本可以兼容 80%以上的插件，其它 20% 都是無用的插件，再去找這 20% 可以兼容的 jQ 核心哩

Previous七、jQuery 常用小技巧

Last updated