站长之家 - 资源 2012-06-25T17:09:39 +08:00

一个超炫HTML5开发的jQuery进度条插件 - percentageloader

今天我们分享一个超酷的使用HTML5画布技术开发的进度条插件 - percentageloader。这个插件比普通的水平进度条使用更加炫酷的效果,图形效果类似以前我们介绍的jQuery knob插件 ,这个插件使用快捷简单,可以非常好的应用到现代浏览器中。插件使用了HTML5的画布来生成图形界面,压缩版本只有10kb大小,并且使用矢量Vector而非图片来生成,可以很方便的生成不同大小的图形。开源软件,大家可以方便自由的使用。

主要特性

1.jQuery1.4+

2.支持浏览器:Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+

3.提供各种控制选项

4.使用简单方便,压缩文件非常小, 10kb

5.无损失的支持各种大小尺寸的图形

如何使用

倒入相关类库及其CSS:

  • 插件js代码:

    $loader = $("#loader").percentageLoader({
    

    width : 400,

    height : 400,

    progress : 0

    });

    主要选项

    1.progress:初始加载位置(0-1)

    2.value:初始的label值

    3.width:宽度

    4.height:高度

    controllable:允许用户点击设置值

    onProgressUpdate(value):提供了一个callback方法,允许使用更新的值来控制进度条

    回调函数使用:

    var loader;
    

    loader = $("myDiv").percentageLoader({

    controllable : true,

    onProgressUpdate : function (value) {

    loader.setProgress(value * 100.0);

    }

    });

    是不是很简单,希望大家能够喜欢这个插件!

    来源:分享一个超炫HTML5开发的jQuery进度条插件 - percentageloader

    推荐关键词

    24小时热搜

    查看更多内容

    大家正在看

    华为P50 Pocket发布