自定义刻度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 相关文章推荐
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
各种常用的JS函数整理
Oct 25 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 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遍历文件夹与子目录的函数代码
2011/09/26 PHP
php猜单词游戏
2015/09/29 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
历史学专业推荐信
2013/11/06 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
农村婚礼证婚词
2014/01/08 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
法人授权委托书范本
2014/04/04 职场文书
员工年终考核评语
2014/12/31 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
单位病假条范文
2015/08/17 职场文书
任命书格式范文
2015/09/22 职场文书
护士业务学习心得体会
2016/01/25 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
浅谈python数据类型及其操作
2021/05/25 Python