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" class="lazy" data-src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  <script type="text/javascript" class="lazy" data-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进度条插件是怎样的，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网行业资讯频道。