web前端經常使用的一些插件、框架以及文檔

　這篇隨筆的文字解釋大多數是從網站直接複製下來的，以便於更快的理解，具體的使用方法以及插件下載請進入具體的網站。若有好的插件能夠留言一塊兒學習。

1. jQuery全屏滾動插件fullPage.js  

fullPage.js 是一款基於jQuery全屏滾動的插件主要功能以下：

• 支持鼠標滾動
• 支持前進後退和鍵盤控制
• 多個回調函數
• 支持手機、平板觸摸事件
• 支持 CSS3 動畫
• 支持窗口縮放
• 窗口縮放時自動調整
• 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

兼容性：

• jquery 1.7+
• ie8+
• chrome
• firefox
• opera
• Safari

使用方法：

　　

進入網站以後到最下方能夠看到說明和下載。 說明是這個插件的具體使用方法，下載是須要引入的文件。　　　　

　　　　　

 

 

更多使用請參照_{：http://www.dowebok.com/demo/2014/77/}

---

2. 頁面經常使用的輪播以及選項卡插件

1.)swiper   _{http://www.swiper.com.cn/demo/index.html}

Swiper經常使用於移動端網站的內容觸摸滑動. 觸屏焦點圖、觸屏Tab切換、觸屏多圖切換。

　　　　swiper的使用方法：_{http://www.swiper.com.cn/usage/index.html}

2.)superslide   _{http://www.superslide2.com/demo.html}

　　　　Supersilde經常使用於pc端的輪播切換等特效。

　　　　superslide的使用方法:_{http://www.superslide2.com/howToUse.html}

　　　　superslide須要下載的文件： _{http://www.superslide2.com/downLoad.html}

---

3. 頁面經常使用的美化的彈框類插件

1.）sweetalert.js  _{http://mishengqiang.com/sweetalert/}

　　sweetalert不管在pc 移動 仍是平板都是會居中顯示，而且還可高度定製。

2.）layer.js  _{http://layer.layui.com/}

　　layer 是一款能夠本身根據需求自定義的彈框。

---

4. 動畫庫 animate.css

　　下載animate.css文件以後 引用你想要的動畫特效的class便可

更多使用請參照：_{https://daneden.github.io/animate.css/}

---

 

5. 將文本複製到剪貼板 clipboard.js

　　 只須要用在觸發器元素上添加屬性，就能夠實現複製或者剪貼功能。

　　data-cliboard-target: 複製文本

　　

<input type="text" value="http://www.cnblogs.com/buweixiu" id="bu">

<button class="btn" data-clipboard-target="#bu">複製<button>

　　data-clipboard-action:剪切文本 

　　使用此屬性的時候清指定是要cut仍是copy內容，若是省略此屬性，默認狀況下使用copy

　　cut操做只適用與<input>和<textarea>元素

<textarea id="wen">從前有座山。。</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#wen">剪切</button>

　　data-clipboard-text：屬性複製文本

　　使用此屬性不須要再觸發器添加一個元素，能夠直接將須要複製的文本放在屬性值裏

　　

<button class="btn" data-clipboard-text="從屬性複製文本">複製</button>

 

 更多使用請參照：_{https://clipboardjs.com/}

---

 

6. 移動端彈性插件 flexible.js

　　　可伸縮彈性佈局

　　　在開發移動端的界面 首先須要設置meta的標籤以下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

　　注： 想要更好的理解這個插件的使用，請先了解rem單位

更多使用請參照：_{https://github.com/amfe/lib-flexible}  

 

---

 

7. 文件上傳插件 plupload.js

 　　實現多種方式上傳

　參考地址1：_{http://www.plupload.com/docs/   這個是官方地址，你可能會看不懂，若是你看不懂 你能夠看下面的}

　參考地址2：_{http://www.cnblogs.com/2050/p/3913184.html  這個是別的大神整理的關於plupload.js的使用}

 

---

8. 前端開發框架 bootstrap

更多使用請參照：_{http://v3.bootcss.com/}

注：這個屬於前端框架，作前端的都知道，功能比較強大，我就很少介紹了

 

---

9. 經常使用js類庫

1.）jQuery

　　參考地址1：_{http://www.runoob.com/jquery/jquery-tutorial.html}

　　參考地址2：_{http://www.jquery123.com/}

2.)zepto.js

　　參考地址：_{http://www.zeptojs.cn/}

注：若是你會使用jQuery 那麼zepto就不在話下了 固然 我本人並無使用過 

 

---

10. 滾動條插件

　　參考地址1_{http://cubiq.org/iscroll-5}

　　參考地址2:_{^{https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/versions.html}}

　　

11.移動端上拉刷新  下拉加載插件

　移動端常常要用到數據的加載，翻頁功能。有一個比較好用的插件  在git上，有幾種demo，具體的使用方法也很齊全。

　　1）dropload

　　參考地址：_{https://github.com/ximan/dropload}