当前位置:首页 > jQuery技术文章 > 基于jQuery Bar Indicator 插件实现进度条展示效果

jQuery Bar Indicator 插件实现进度条实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:103

这篇文章主要知识点是关于jquery、进度条效果、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript和jQuery实战手册
  • 类型:JavaScript大小:103 MB格式:PDF作者:大卫·索耶·麦克法兰德
立即下载

基于jQuery Bar Indicator 插件实现进度条展示效果

Bar Indicator是一款基于jQuery的进度条数据展示插件,它可应用于数据统计展示、投票统计以及任务进度等诸多场景中。它使用简单、选项丰富,几乎可以满足用户所有基于进度条的WEB设计需求,本文将结合实例给大家讲解Bar Indicator的使用。

基于jQuery Bar Indicator 插件实现进度条展示效果

查看演示 下载源码

HTML

首先加载jQuery和Bar Indicator相关js文件以及css文件。

<link href="bi-style.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="jquery-barIndicator.js"></script>
<script src="jquery.easing.1.3.js"></script>

由于使用了动画缓冲效果,记得把easing插件也加上,您可以下载源码包,这些文件都打包好了。然后在<body>中加上HTML:

 

复制代码 代码如下:

<span id="bar">55lt;/span>

 

看到了吧,代码中数字55表示的就是这个进度条要展示的进度,默认是100,当然这个数字也可以在插件调用时定义好。

jQuery

准备好html后,然后开始调用Bar Indicator,只要一句代码:

<script>
$('#bar').barIndicator();
</script>

是不是非常的简单,当然要满足您的项目需求的话,还需要进行一些设置,而Bar Indicator为我们提供了丰富的选项设置和事件方法调用,诸如水平/垂直进度条、进度条颜色、数值展示、进度数值获取与重新设置等。

选项与方法

基于jQuery Bar Indicator 插件实现进度条展示效果

Bar Indicator非常强大,还有很多选项不本文就不一一列出。以上介绍就是关于基于jQuery Bar Indicator 插件实现进度条展示效果,更多内容请持续关注本站。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

深入理解JS函数stack size计算方法

展开 +

收起 -

jQuery 相关电子书
学习笔记
网友NO.702312

基于jquery步骤进度条源码分享

基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效。效果图如下: 在线预览 源码下载 html代码: div class="step_context test"/div当前步骤:第input type="text" value="5" id="currentStepVal" /步 button onclick="StepTool.drawStep(jQuery('#currentStepVal').val(),stepListJson);" type="button"重新生成/buttonscript type="text/javascript" //所有步骤的数据 var stepListJson = [{ StepNum: 1, StepText: "第一步" }, { StepNum: 2, StepText: "第二步" }, { StepNum: 3, StepText: "第三步" }, { StepNum: 4, StepText: "第四步" }, { StepNum: 5, StepText: "第五步" }, { StepNum: 6, StepText: "第六步" }, { StepNum: 7, StepText: "第七步" }]; //当前进行到第几步 var currentStep = 5; //new一个工具类 var StepTool = new Step_Tool_dc("test", "mycall"); //使用工具对页面绘制相关流程步骤图形显示 StepTool.drawStep(currentStep, stepListJson); //回调函数 function mycall(restult) {……

网友NO.975972

jquery实现的一个简单进度条效果实例

jquery实现一个进度条的效果,或许在这里没有什么实际的作用,但是已经实现了进度条的部分原理,前端是怎么实现那种进度效果的。 效果演示: 进度条实现源码: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / titlejquery实现进度条/title style .progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;} #bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;} /style script type="text/jscript" src="jquery.min.js"/script script type="text/javascript" function progressBar(){ //初始化js进度条 $("#bar").css("width","0px"); //进度条的速度,越小越快 var speed = 20; bar = setInterval(function(){ nowWidth = parseInt($("#bar").width()); //宽度要不能大于进度条的总宽度 if(nowWidt……

网友NO.216185

jQuery多文件异步上传带进度条实例代码

先给大家展示下效果图: ///作者:柯锦///完成时间:2016.08.16///多文件异步上传带进度条(function ($) {function bytesToSize(bytes) {if (bytes === 0) return '0 B';var k = 1024, // or 1000sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],i = Math.floor(Math.log(bytes) / Math.log(k));return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];}function changeCursor(obj) {obj.style.cursor = 'pointer'}function deleteSelfAndFile(obj) {var that = $(obj);var parentLi = that.parent("li");that.remove();parentLi.remove();}function CreateXMLHttpRequest(target) {var xhr = new XMLHttpRequest();//var ops = $.data(target, "KJajaxUpload").Options;//var v, h, evs = { loadstart: 0, loadend: 0, progress: 0, load: 0, error: 0, abort: 0 };//for (v in evs) {// if (h = ops['on' + v]) {// xhr.upload.addEventListener(v, h, false);// }/……

网友NO.481993

简单实现jQuery进度条轮播实例代码

本文实例为大家分享了jQuery进度条轮播的具体实现代码,供大家参考,具体内容如下 HTML: div class="bannar" div class="img" ul li /li li /li li /li li /li /ul /div div class="text" ul li0/li li1/li li2/li li3/li /ul /div div class="nav" ul lip/p/li lip/p/li lip/p/li lip/p/li /ul /div /div CSS: style *{ margin:0 auto; padding:0; } .bannar{ width:100%; height:490px; position:relative; } .img{ width:100%; height:490px; overflow:hidden; } .img ul li{ width:100%; height:490px; list-style-type: none; display:none; } .text{ width:1000px; height:6px; position:absolute; bottom:28px; left:50%; margin-left:-500px; } .nav{ width:1000px; height:10px; position:absolute; bottom:4px; left:50%; margin-left:-500px; } .text ul li{ width:200px; height:100%; float:left; margin-left:38px; list-style-type: none; } .nav ul li{ width:200px; height:10px; float:left; margin-left:38px; list-style-type: none; background:gray; } .nav ul li p{ width:0px; height:100%; background:red; ……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757