自定义刻度jQuery进度条及插件


Posted in Javascript onSeptember 02, 2015

简要教程 progressdots是一款可自定义刻度动画的jQuery进度条插件。通过该jQuery进度条插件你可以自定义进度条刻度圆点的数量,大小,颜色等属性,并且可以通过CSS来控制圆点的外观样式。

请看下面效果图了解相关插件。

自定义刻度jQuery进度条及插件

使用该jQuery进度条插件需要引入jquery,jquery.progressdots.js和jquery.progressdots.css文件。

<script src="jquery.min.js"></script> 
<script src="jquery.progressdots.js"></script>
<link href="jquery.progressdots.css" rel="stylesheet">

HTML结构

然后使用一个空的<div> 元素来作为进度条的容器。

容器的宽度和高度任意。

<div id='progressBox'></div>

为进度条容器设置一些基本样式,指定它的宽度和高度。

#progressBox{ border: 8px solid #DDD; width: 80%; height: 40px; }

调用插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该进度条插件

$( '#progressBox' ).dottify({ dotSize: '25px', 
//set size of dot dotColor: '#f15c89',
//set dot color (#HEX) progress: true, 
//enable progress percent: 10, //set initial percentage radius: '40%'
//set dot corner radius });

高级选项

var progressBox = $( '#progressBox' ).dottify({ progress:true,
//start with progressbar on percent:0 }); progressBox.setProgress( 20 );
//update progress percentage

可自定义刻度jQuery进度条是一款可以自定义进度条刻度圆点的数量,大小,颜色等属性,并且可以通过CSS来控制圆点的外观样式。

效果图如下:

自定义刻度jQuery进度条及插件

查看演示  在线下载

html代码:

<div class="htmleaf-container">
 <div id="container">
  <div class="padded">
  <div id="progressHolder"></div>
  <div id="progressReset">生成随机的风格</div>
  </div>
 </div>
 </div>
 <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
 <script src="js/jquery.progressdots.js"></script>
 <script src="js/prism.js"></script>
 <script>
 $(document).ready(function () {
  createSpots(1);
  $("#progressReset").click(function (event) {
  event.preventDefault();
  createSpots(1);
  });
  function createSpots(num) {
  for (var i = 0; i < num; i++) {
   options = {
   dotSize: random(10, 20) + "px",
   radius: random(1, 7) * 10 + "%"
   };
   randomHtml = "";
   if (Math.random() < 0.5) {
   options.randomColors = true;
   randomHtml += "\n\trandomColors: " + options.randomColors + ", //use random colors";
   }
   else {
   options.dotColor = randomColor();
   randomHtml += "\n\tdotColor: '" + options.dotColor + "', //set dot color (#HEX)";
   }
   if (Math.random() < 0.3) {
   options.progress = true;
   options.percent = random(5, 100);
   randomHtml += "\n\tprogress: true, //enable progress";
   randomHtml += "\n\tpercent: " + options.percent + ", //set initial percentage";
   } else {
   options.numDots = random(3, 15);
   randomHtml += "\n\tnumDots: " + options.numDots + ", //number of dots";
   }
   string = "$( '#progressBox' ).dottify({\
   \n\tdotSize: '" + options.dotSize + "', //set size of dot" +
    randomHtml +
    "\n\tradius: '" + options.radius + "' //set dot corner radius\
  \n});";
   var $container = $("<div class='swoopContainer'></div>").data("setupString", JSON.stringify(string));
   $("#progressHolder").append($container.hide());
   $container.slideDown(function () {
   $(this).css({ overflow: "hidden" });
   });
   $container.click(function () {
   $(".swoopContainer").removeClass("selected");
   $(this).addClass("selected");
   $("#jsContents").html(JSON.parse($(this).data("setupString")));
   Prism.highlightAll();
   });
   $container.dottify(options);
   $("#jsContents").html(string);
   Prism.highlightAll();
  }
  $(".swoopContainer").removeClass("selected");
  $(".swoopContainer").last().addClass("selected");
  }
  function randomColor() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
  }
  function random(min, max) {
  return Math.floor(Math.random() * ((max - min) + min) + min);
  }
 });
 </script>
Javascript 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
jquery tab标签页的制作
May 10 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
JS class语法糖的深入剖析
Jul 07 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 #Javascript
javascript中for/in循环及使用技巧
Sep 01 #Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 #Javascript
JavaScript中this详解
Sep 01 #Javascript
JS实现的自定义右键菜单实例二则
Sep 01 #Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 #Javascript
jquery常用函数与方法汇总
Sep 01 #Javascript
You might like
php实现留言板功能(代码详解)
2017/03/28 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
Mac下安装vue
2018/04/11 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
python使用arp欺骗伪造网关的方法
2015/04/24 Python
python中reader的next用法
2018/07/24 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
电子信息专业学生自荐信
2013/11/09 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
元旦晚会邀请函
2014/02/01 职场文书
房地产开盘策划方案
2014/02/10 职场文书
公司仓库管理制度
2015/08/04 职场文书
入党申请书怎么写?
2019/06/11 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
python中super()函数的理解与基本使用
2021/08/30 Python