iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0
自我挑戰組

網頁排版個人學習筆記系列 第 21

jQuery|第三方plugin技巧

  • 分享至 

  • xImage
  •  

文章前提


載入第三方Plugin首要步驟

  • 確認瀏覽器有無支援
  • 確保 CSS、JS、IMG 皆載入
    • 如果有CDN也可使用CDN即可
  • 查詢plugin的Js設定
    • 可開壓縮檔內的index.html看css與js路徑
  • 修改css成自己要的樣式
    • 盡量不要修改官方提供的css檔,可改自己的css檔內

why有些script js不放在<head></head>中而放在<body></body>內最後方?

  • 跟隨網站指引的位置放
  • 當網頁html裡的內容都被載好後,再來跑js再針對上面的圖片與內容做執行

/

Animate插件

Animate.css

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
  • 實作步驟-網頁載入直接有shake效果 範例
    • 於.box內加入 animated +動畫效果名稱
    • js檔寫入addClass('動畫效果名稱')
<body>
    <input type="button" class="open" value="網頁載入即執行shake動作" >
    <div class="box animated shake"></div>
</body>
$(document).ready(function() {
    $('.open').click(function(event) {
        $('.box').addClass('shake');
    });
});
  • 實作步驟-按下button才執行shake效果 範例
    • 要執行特效的.box 寫入animated
    • js檔寫入addClass('動畫效果名稱')
    • 記得載入Animate.css檔案或CDN
<body>
    <input type="button" class="open" value="按下按鈕才執行shake動作" >    
    <div class="box animated"></div>
</body>
$(document).ready(function() {
    $('.open').click(function(event) {
        $('.box').addClass('shake');
    });
});
  • 上方狀況都只能執行一次:按下按鈕,box執行shake,要怎麼不重新整理頁面,按button重複搖動
    • 使用animationend事件 範例
    • 'animationend' 簡單來說就是「動畫結束」的監聽事件,如果動畫結束了就將 class 從元素上移除從而達到你下次點擊也能產生動畫效果

/

Swiper 插件

輪播效果 範例

  1. 打開Get Started看操作步驟
  2. 分別把css與 js的CDN放置 html中,推薦用 .min 壓縮版本(也可至首頁以下載檔案的方始載入)
    • js的cdn可放置內的後方。當網頁html裡的內容都被載好後,再來跑js再針對上面的圖片與內容做執行
      swiper cdn示意圖
  3. 複製貼上Swiper提供的 HTML範本,自訂內容。
  4. API ,裡面提供很多輪播細部設定
    • swiper parameters 內有許多參數設定,參數與參數間一定要用逗號 , 做分隔
    • 不同的屬性都有自己的參數設定可看。ex: Pagination就可到Pagination parameters找它的細部設定
      參數間逗號分隔示意圖

我習慣的步驟 紀錄一下XD

  1. 於載入css CDN
  2. 於內後方載入js核心與Swiper CDN
  3. 到Swiper DEMOS找喜歡的輪播特效,按 Source code到Github,複製程式碼到自己檔案
    • 以 Navagation 為例 ,程式碼中 Initialize Swiper 我會整理到js檔案中
$(document).ready(function () {
    //丟這邊
});

如何把API放入js檔案中
Swiper API 左方可選取需要的設定,以Autoplay為例
* 把autoplay右方程式碼複製到$(document).ready(function () {}); 即可
* 如果要再加上另個參數loops(自動循環),就以逗號分隔開再輸入loop:true, 即可,以此類推

https://ithelp.ithome.com.tw/upload/images/20190920/201197430W01FDk5qV.png

$(document).ready(function () {
     var swiper = new Swiper('.swiper-container', {
    //自動播放
        autoplay: { 
            delay: 5000, 
        },
    //連續循環
        loop:true,
    });
});
  • 常用到的參數有
    • Autoplay 自動播放 不需按按鈕
    • speed 速度
    • loop:true, 連續循環。例如:p3為末,再按一下又會回到p1
    • direction 方向

如何移除不要的效果

  • 以刪除scrollbar為例
<body>
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div><!--整行刪掉-->
</body>
$(document).ready(function() {
    var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
/*scrollbar整段刪掉
    // And if we need scrollbar    
    scrollbar: {
      el: '.swiper-scrollbar',
    },
*/    
  })
});

/

jQuery尾聲建議 範例

  • 同一個div中要寫css樣式及jq效果時,建議在class 加上 另一個 jq-box,會比較好做管理
    • 如果寫了很多網頁,但有些網頁不想要jq效果,只想要單純css樣式效果,就可以css處寫.box樣式。jQuery處用.jq-box就不會因為某個網頁不想加jq效果而改到崩潰
<body>
  <input type="button" class="btn jq-btn" value="button">
  <div class="box jq-box"></div>
</body>
$(document).ready(function () {
  $('.jq-btn').click(function(){
    $(this).siblings('.jq-box').toggleClass('active');
  });
});

上一篇
jQuery|操控網頁元素2
下一篇
RWD|基本環境介紹
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言