超炫HTML 5开发的jQuery进度条插件

开发 前端
插件使用了HTML5的画布来生成图形界面,压缩版本只有10kb大小,并且使用矢量Vector而非图片来生成,可以很方便的生成不同大小的图形。开源软件,大家可以方便自由的使用。

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

在线演示  本地下载 

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

主要特性

jQuery1.4+

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

提供各种控制选项

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

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

如何使用

倒入相关类库及其CSS:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  
  2. <script type="text/javascript" src="js/jquery.percentageloader-0.1.min.js"></script>  
  3. <link rel="stylesheet" type="text/css" href="css/jquery.percentageloader-0.1.css" />  
  4.  
  5. 插件js代码:   
  6.  
  7. $loader  = $("#loader").percentageLoader({  
  8.     width : 400,   
  9.     height : 400,   
  10.     progress : 0  
  11. }); 

主要选项

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

value:初始的label值

width:宽度

height:高度

controllable:允许用户点击设置值

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

回调函数使用:

  1. var loader;  
  2. loader = $("myDiv").percentageLoader({  
  3.     controllable : true,  
  4.     onProgressUpdate : function (value) {  
  5.         loader.setProgress(value * 100.0);  
  6.     }  
  7. }); 

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

原文链接:http://www.cnblogs.com/gbin1/archive/2012/06/20/2555974.html

责任编辑:张伟 来源: gbin1的博客
相关推荐

2012-07-31 09:53:33

HTML5进度条

2015-07-31 11:19:43

数字进度条源码

2011-08-02 14:45:11

HTML 5

2009-08-17 13:56:29

C#进度条的使用

2012-11-21 09:53:19

jQueryWeb

2021-11-02 07:44:36

CSS 技巧进度条

2011-07-05 15:16:00

QT 进度条

2015-01-12 12:13:03

Android进度条ProgressDia

2015-08-03 11:39:20

拟物化进度条

2015-01-12 09:30:54

Android进度条ProgressDia

2013-03-12 10:35:06

CSS 3

2012-01-17 13:58:17

JavaSwing

2009-06-06 18:54:02

JSP编程进度条

2023-12-11 17:15:05

应用开发波纹进度条ArkUI

2012-03-09 09:37:01

HTML 5

2021-04-09 23:11:25

Python程序开源

2009-12-25 17:58:12

WPF进度条

2009-08-18 09:49:00

C# listview

2009-08-17 15:48:47

C# WinForm进

2009-08-17 14:41:47

C#进度条实现
点赞
收藏

51CTO技术栈公众号