免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

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

时间:06-26 14:05 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  今天我们分享一个超酷的使用HTML5画布技术开发的进度条插件 - percentageloader。这个插件比普通的水平进度条使用更加炫酷的效果,图形效果类似以前我们介绍的jQuery knob

分享一个超炫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:

<pre><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" />

</pre>

插件js代码:

<pre>$loader = $("#loader").percentageLoader({

width : 400,

height : 400,

progress : 0

});

</pre>

主要选项

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

2.value:初始的label值

3.width:宽度

4.height:高度

controllable:允许用户点击设置值

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

回调函数使用:

<pre style="width: 688px; border: 1px solid #555555; z-index: auto;">var loader;

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

controllable : true,

onProgressUpdate : function (value) {

loader.setProgress(value * 100.0);

}

});

</pre>

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

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

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,一个超炫HTML5开发的jQuery进度条插件 - percentageloader对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与一个超炫HTML5开发的jQuery进度条插件 - percentageloader无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈