软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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