HTML 5開發的jQuery進度條插件是怎樣的

本篇文章為大家展示了HTML 5開發的jQuery進度條插件是怎樣的，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

今天我們分享一個超酷的使用HTML5畫布技術開發的進度條插件 - percentageloader。這個插件比普通的水平進度條使用更加炫酷的效果，圖形效果類似以前我們介紹的jQuery knob插件 ，這個插件使用快捷簡單，可以非常好的應用到現代瀏覽器中。插件使用了HTML5的畫布來生成圖形界面，壓縮版本只有10kb大小，并且使用矢量Vector而非圖片來生成，可以很方便的生成不同大小的圖形。開源軟件，大家可以方便自由的使用。

主要特性

jQuery1.4+

支持瀏覽器：Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+

提供各種控制選項

使用簡單方便，壓縮文件非常小， 10kb

無損失的支持各種大小尺寸的圖形

如何使用

倒入相關類庫及其CSS：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  <script type="text/javascript" src="js/jquery.percentageloader-0.1.min.js"></script>  <link rel="stylesheet" type="text/css" href="css/jquery.percentageloader-0.1.css" />   插件js代碼：    $loader  = $("#loader").percentageLoader({      width : 400,       height : 400,       progress : 0  });

主要選項

progress：初始加載位置（0-1）

value：初始的label值

width：寬度

height：高度

controllable：允許用戶點擊設置值

onProgressUpdate(value)：提供了一個callback方法，允許使用更新的值來控制進度條

回調函數使用：

var loader;  loader = $("myDiv").percentageLoader({      controllable : true,      onProgressUpdate : function (value) {          loader.setProgress(value * 100.0);      }  });

上述內容就是HTML 5開發的jQuery進度條插件是怎樣的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。