jQuery 插件

1.  jQuery 插件

​ jQuery 功能比較有限，想要更復雜的特效效果，能夠藉助於 jQuery 插件完成。 這些插件也是依賴於jQuery來完成的，因此必需要先引入

jQuery文件，所以也稱爲 jQuery 插件。

​ jQuery 插件經常使用的網站：

1. jQuery 插件庫  http://www.jq22.com/    

2. jQuery 之家   http://www.htmleaf.com/

   jQuery 插件使用步驟：

3. 引入相關文件。（jQuery 文件 和 插件文件）   

4. 複製相關html、css、js (調用插件)。

1.1.  瀑布流插件（重點講解）

​ 咱們學習的第一個插件是jQuery之家的開源插件，瀑布流。咱們將重點詳細講解，從找到插件所在網頁，而後點擊下載代碼，到插件的使用等，後面的插件使用可參考瀑布流插件的使用。

下載位置

 

 

代碼演示

​ 插件的使用三點：   1. 引入css.           2.引入JS            3.引入html。 （有的簡單插件只需引入html和js，甚至有的只需引入js）

1.引入css.

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
  
<!-- 下面的樣式代碼爲頁面佈局，能夠引入，也能夠本身寫，本身設計頁面樣式，通常爲直接引入，方便 -->
<style type="text/css">
  #gallery-wrapper {
    position: relative;
    max-width: 75%;
    width: 75%;
    margin: 50px auto;
  }

  img.thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .white-panel {
    position: absolute;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    padding: 10px;
  }

  .white-panel h1 {
    font-size: 1em;
  }

  .white-panel h1 a {
    color: #A92733;
  }

  .white-panel:hover {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    margin-top: -5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
</style>

2.引入js.

<!-- 前兩個必須引入 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<!-- 下面的爲啓動瀑布流代碼，參數可調節屬性，具體功能可參考readme.html -->
<script type="text/javascript">
    $(function() {
      $("#gallery-wrapper").pinterest_grid({
          no_columns: 5,
          padding_x: 15,
          padding_y: 10,
          margin_bottom: 50,
          single_column_breakpoint: 700
      });
    });
</script>

3.引入html.

<!-- html結構通常爲事先寫好，很難修改結構，但能夠修改內容及圖片的多少（article標籤） -->
    <section id="gallery-wrapper">
        <article class="white-panel">
            <img src="images/P_000.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裏面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_005.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裏面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_006.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裏面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_007.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裏面很精彩哦</p>
        </article>
    </section>

總結：jQuery插件就是引入別人寫好的：html 、css、js  （有時也能夠只引入一部分，讀懂後也能夠修改部份內容）

1.2. 圖片懶加載插件

​ 圖片的懶加載就是：當頁面滑動到有圖片的位置，圖片才進行加載，用以提高頁面打開的速度及用戶體驗。（下載略）

代碼演示

​ 懶加載只需引入html 和 js操做 便可，此插件不涉及css。

1.引入js

<script src="js/EasyLazyload.min.js"></script>
<script>
       lazyLoadInit({
           showTime: 1100,
           onLoadBackEnd: function(i, e) {
             console.log("onLoadBackEnd:" + i);
           },
           onLoadBackStart: function(i, e) {
             console.log("onLoadBackStart:" + i);
           }
     });
</script>

2.引入html

<img data-lazy-src="upload/floor-1-3.png" alt="">

1.3. 全屏滾動插件

​ 全屏滾動插件比較大，因此，通常大型插件都會有幫助文檔，或者網站。全屏滾動插件介紹比較詳細的網站爲：

http://www.dowebok.com/demo/2014/77/

代碼演示

​ 全屏滾動由於有多重形式，因此不同的風格html和css也不同，可是 js 變化不大。因此下面只演示js的引入，html和css引入根據本身實際

項目須要使用哪一種風格引入對應的HTML和CSS。

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
      $(function() {
          $('#dowebok').fullpage({
            sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
            navigation: true
          });
    });
</script>

注意：實際開發，通常複製文件，而後在文件中進行修改和添加功能。

1.4. bootstrap組件

​ Bootstrap是 Twitter 公司設計的基於HTML、CSS、JavaScript開發的簡潔、直觀、強悍的前端開發框架，他依靠jQuery實現，且支持響應式

佈局，使得 Web 開發更加方便快捷。

​ 凡是在軟件開發中用到了軟件的複用，被複用的部分均可以稱爲組件，凡是在應用程序中已經預留接口的組件就是插件。Bootstrap組件使

用很是方便:  1.引入bootstrap相關css和js        2.去官網複製html

代碼演示

1.引入bootstrap相關css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

2.去官網複製html的功能模塊

 <div class="container">
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Action <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
         </div>
    </div>

1.5. bootstrap插件（JS）

​ bootstrap中的js插件其實也是組件的一部分，只不過是須要js調用功能的組件，因此通常bootstrap的js插件通常會伴隨着js代碼（有的也能夠

省略js，用屬性實現）。

​ 步驟： 1.引入bootstrap相關css和js        2.去官網複製html        3.複製js代碼，啓動js插件。

代碼演示

1.引入bootstrap相關css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

2.去官網複製html的功能模塊

<!-- 模態框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            裏面就是模態框
        </div>
    </div>
</div>

3.複製js代碼，啓動js插件。

<script>
    // 當咱們點擊了本身定義的按鈕，就彈出模態框
    $(".myBtn").on("click", function() {
        // alert(11);
        $('#btn').modal()
    })
</script>

1.6. bootstrap案例-阿里百秀

1.經過調用組件實現導航欄2.經過調用插件實現登陸3.經過調用插件標籤頁實現 tab 欄

​ 代碼實現略。