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

   實現多種方式上傳

 參考地址1http://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

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

  參考地址2:http://www.jquery123.com/

2.)zepto.js

  參考地址:http://www.zeptojs.cn/

注:如果你會使用jQuery 那么zepto就不在話下了 當然 我本人並沒有使用過 

 


10. 滾動條插件

  參考地址1http://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

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM