前端學習筆記之第三方插件

時間 2019-12-14

標籤前端學習筆記第三方插件简体版

原文原文鏈接

主要內容：jQuery UI, 其餘插件，***封裝自定義插件

學任何行東西步驟：css

　　1.上官網/百度知道：查是是什麼html

　　2.上官網看DEMOjquery

　　3.上官網看手冊：數組

1.jQuery UI:

什麼是：jQuery官方出的，基於jQuery實現的，比jQuery跟簡化的UI組件和函數庫瀏覽器

UI:用戶界面dom

UI組件:由HTML,CSS,組成的實現一個專門功能的UI程序和效果的包。好比：下拉菜單，彈出對話框手風琴...ide

　　爲何：避免重複開發，實現HTML,CSS和JS的代碼重用函數

　　什麼時候：若是以爲jQuery依然不夠簡化動畫

　　如何:網站

　　　　1.先引入jquery.js

　　　　2.下載/CDN：jquery-UI.js

三大部分：

第一部分效果：對jQuery中原有的動畫API進行加強

　　1.爲.add/remove/toggleClass添加動畫(speed)

　　　　.add/remove.toggleClass("類名",speed)

　　2.爲show/hide.toggle添加了更好的特效

　　　.show/hide/toggle("特效名",speed)

　　3.讓animate支持顏色動畫

第二部分：交互組件：爲頁面現有的元素添加特殊交互行爲

　　侵入性：組件根據自身的須要，動態向原有元素上添加所需的class或自定義擴展屬性。

　　問題：若是發現入侵，但樣式依然沒變

　　解決：1.可能沒有引入jquery UI的css

　　　　　2.可能侵入的樣式須要自行實現

1.draggable() 讓一個元素可拖拽

　　HTML:div.box>hn.ui-dialog-titlebar+p

　　CSS:不用

　　JS: $(".box").draggable();

2. .selectable() 讓一個列表中的li可選擇

　　HTML:.ui>li*n

　　CSS:.ui-selected{...}定義選中的li樣式

　　js:$("ui").selected();

3. .sortable() 讓一個列表中的li可從新排列位置

　　HTML: ui>li*n

　　CSS:不須要

　　js:$("ui").sortable();

第三部分：部件：擁有完成樣式和行爲的一個獨立功能

　　　　強調：用部件，都要先引入jquery-ui.css

　　　　關於色調和主題：官網->Themes->Gallery->選擇顏色主題->dowload

　1.Accordion:手風琴：

　　　　如何：HTML：父元素>(標題hn+內容 div/p)*n

　　　　　　　　CSS:不用

　　　　　　　　　js:$("父元素").accordion();

　　　　　　　　　boot中有

　2. autocomplete 自動完成

　　　　　　html:input文本框

　　　　　　css:

　　　　　　js:2步：1.定義備選詞數組

　　　　　　　　　　2.對input文本框調用.autocomplete()

　　　　　　　　　　　　$(...)autocomplete({source：數組})

　3.button 讓各類按鈕變成統一的按鈕樣式

　　　　　　　　html:a inout type="butoon", button

　　　　　　　　js:$(...).button();

　　　　　　　　boot中有

　4.datepicker 日曆部件：

　　　　　　html:input 文本框

　　　　　　css：

　　　　　　js:$(...).datepicker({

　　　　　　　　dateFormat:"yyyy年mm月dd日"

　　　　　　});

　　　　H5:也有日期組件：input type = "date"

　5.dialog:對話框：

　　　　　　　html:對話框容器[titile=標題]>內容

　　　　　　　　其中title屬性會自動變成爲對話框標題

　　　　　　　js:$(...).dialog({autoOpen:false})

　　　　　　　打開：$(...).dialog("open")

　　　　　　　關閉：$(...).dialog("close")

　　　　　　　模態對話框：一旦打開對話框，則禁止操做網頁其餘元素

　　　　　　　　　　$(...).dialog({autoOpen:false,modal:true})

　　　　　　boot中有

　6.Menu菜單:

　　　　　　HTML:ui>li>ul>li...

　　　　　　CSS:.ui-menu{width:xxxpx}

　　　　　　js:$("ui").menu();

　　　　　　若是某個li不可用，就添加class="ui-state-disabled"

　　　　　　boot中有

　7.進度條

　　　　html:進度條div>標籤 div

　　　　css:爲進度條div和標籤div設置定位

　　　　js：初始化進度條：

　　　　　　$progressbar.progressbar({

　　　　　　　　value:false|0,

　　　　　　　　change:function(){//當進度條的value被改變時

　　　　　　　　//修改label的內容爲進度條當前的value

　　　　　　　　//獲取當前進度條的value:

　　　　　　　　complete:function(){//當進度條進度100%

　　　　　　　　　　//改 label

　　　　　　　　}

　　　　　　})

　　　　　　修改進度條進度：

　　　　　　$progressbar.progressbar("value",值)

　　　　　　boot中有

　8.slider

　9.spinner

　10.tabs:標籤頁

　　HTML:

　　　　容器 div

　　　　　　ul>li>a href="#id"

　　　　　　內容頁：div#d*n

　　CSS:

　　js:$("容器div").tabs();

　　boot中有

2.其餘插件：

　　使用前也必須去官網下載，並用link和script將css和js文件加載到頁面

　　1.日期插件：layDate 不依賴於jQuery

　　　　HTML:

　　　　CSS：

　　　　js:laydate({

　　　　　　elem:"#id",

　　　　　　format:"YYYY年MM月DD日"

　　　　})

　　2.表單驗證：jquery.validator 依賴於jquery

　　　　HTML：普通表單

　　　　CSS:自定義驗證爲經過的樣式

　　　　　　定義輸入框出錯時的樣式：input.error{...}

　　　　　　定義錯誤提示標籤的樣式：label.error{...}

　　　　js:$("form").validate({

　　　　　　rules:{//保存對每一個輸入框的驗證規則

　　　　　　//若是一個輸入框只有一個驗證規則時：

　　　　　　　name1:"required",//必填

　　　　　　//若是一個輸入框被多個規則約束

　　　　　　name2:{

　　　　　　　　規則1：值，

　　　　　　　　規則2：值，

　　　　　　　}

　　　　　　　message:{//保存每一個驗證規則對象的錯誤提示

　　　　　　　　name1:"錯誤提示"，

　　　　　　　　//若是一個輸入框被多個規則約束

　　　　　　　　name2:{

　　　　　　　　　　規則1："錯誤提示"，

　　　　　　　　　　規則2："錯誤提示"，

　　　　　　　　}

　　　　　　}，

　　　　})

　　強調：格式驗證，一般不驗證空值

　　　　　　若是必填，必須加required

　　　添加自定義規則：

　　　　jQuery.validator.addMethod("規則名"，fn,msg)

　　　其中：fn的參數value可自動得到要驗證的輸入值

　　　　　　若是驗證經過，返回true，不然返回false

　　3.瀑布流：masonry

　　　　html:容器 div>大小不一樣的div

　　　　js:$("容器div").masonry();

　　瀑布流的實現思路：

　　　　1.計算頁面的寬度，而後計算出頁面的寬度可放數據塊的列數。

　　　　2.將各個數據塊的高度尺寸計入數組中。

　　　　3.用絕對定位先將頁面的第一行填滿，由於第一行的top位置都同樣的，而後用數組記錄每一行的總高度)。

　　　　4.繼續用絕對定位將其餘數據塊定位在最短的一列以後而後更新該列的高度。

　　　　5.當瀏覽器窗口大小改變時，從新執行一次上面1-4步以從新排放（列數隨頁面寬度而改變，於是須要從新排放）

　　　　6.滾動條滾動到底部時加載新的數據進來後也是定位在最短的一列的位置以後而後更新該列的高度。

 1 <!doctype html>
 2 <html>
 3     <head>
 4           <title> </title>
 5           <meta charset="utf-8">
 6     </head>
 7     <body>
 8        <div id="container">
 9         //設置多個高度不相同，寬度相同的塊元素
10       </div> 
11      <script src ="引入jquery代碼"></script>
12     <script>  
13          $("elem").css("background",function(){//隨機生成顏色
14               var r = Math.floor(Math.random()*256);
15               var g = Math.floor(Math.random()*256);
16               var b = Math.floor(Math.random()*256);
17               return "rgb("+r+","+g+","+b+")";
18         })
19         $("#container").masonry();
20     </script>
21     </body>
22 </html>

3.***封裝自定義插件：

　　什麼時候：只要發現網頁中一個效果或功能須要在多個網站中重用時

　　如何：2種

　　1.添加jQury全局函數：

　　$(...).each vs $.each

　　1.存儲：$(...).each 保存在jQury.fn原型對象中

　　　　　　$each 直接保存在構造函數上

　　2.調用：

　　　　$(...).each只能被jQuery查詢結果對象調用

　　　　$.each 可被任意類型(jQuery對象及其餘類數組或數組對象)調用

　　2.封裝jQuery部件：

　　　　3步：

　　　　1.定義css樣式:

　　　　2.爲指定的元素侵入class

　　　　3.爲元素綁定事件

 1 //經過jqurey封裝本身的插件
 2 
 3 if(!window.jQuery)  //判斷用戶是否引入jQuery庫文件
 4     throw new Error("自定義部件依賴於jQuery庫")
 5 //爲jQuery.fn原型對象天機實例方法
 6     jQuery.fn.myAccordion=function(){//this->$(容器)
 7       //侵入
 8       //爲容器侵入class accordion
 9       this.assClass("accordion");
10       //爲偶數位置的子元素侵入class content fade
11             .next().addClass("content fade");
12      //爲第一個title侵入class in
13        this.children(".content:first").addClass("in");
14      //事件綁定
15      this.children(".title").click(function(){
16           //this->title
17          $(this).next().toggleClass("in")
18                    .siblings(".content").removeClass("in");
19      })
20     
21 }