文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML 5开发的jQuery进度条插件是怎样的

2024-04-02 19:55

关注

本篇文章为大家展示了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" 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" />   插件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进度条插件是怎样的,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯