jq插件做圆形进度条,兼容ie7、ie8


1、插件名字jQuery-Knob-master

下载地址https://github.com/aterrien/jQuery-Knob

2、常用参数说明:

  1. <script>
  2. $(function() {
  3. $(".dial").knob({
  4. width:100,//宽度
  5. thickness:0.2,//厚度按百分几计算
  6. fgColor:'#f90',//前景色
  7. //displayInput:false,//不显示input
  8. //bgColor:'#000',//背景色
  9. readOnly:true,//只读
  10. //linecap:'round',
  11. //inputColor:'#f60', //数字的颜色
  12. });
  13. });
  14. </script>

完整案例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jQuery Knob demo</title>
  5. <script src="js/jq.js"></script>
  6. <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
  7. <script src="js/jquery1.knob.js"></script>
  8. <style>
  9. .box{width:100px;height:100px;position: relative;overflow:hidden;}
  10. .box canvas{position: absolute;top:0;left:0;width:100px;}
  11. .box span{line-height:100px;display:inline-block;width:100px;text-align:center;}
  12. </style>
  13. </head>
  14. <body>
  15. <div class="box">
  16. <input type="text" value="70" class="dial" >
  17. <span>70%</span>
  18. </div>
  19. <div class="box">
  20. <input type="text" value="10" class="dial" style="display:none">
  21. <span>10%</span>
  22. </div>
  23. <div class="box">
  24. <input type="text" value="30" class="dial" style="display:none">
  25. <span>30%</span>
  26. </div>
  27.  
  28. <script>
  29. $(function() {
  30. $(".dial").knob({
  31. width:100,//宽度
  32. thickness:0.2,//厚度按百分几计算
  33. fgColor:'#f90',//前景色
  34. //displayInput:false,//不显示input
  35. //bgColor:'#000',//背景色
  36. readOnly:true,//只读
  37. //linecap:'round',
  38. //inputColor:'#f60', //数字的颜色
  39. });
  40. });
  41. </script>
  42. </body>
  43. </html>

解决id7/8下进度在100%的情况下没有前景色

为了兼容坑爹的垃圾ie可以在100%进度下单独设置背景色和前景色为同一颜色,于是自己又改了一下

  1. $.fn.knob_progress=function(options){
  2. var defaults={
  3. width:55
  4. };
  5. var opts = $.extend({},defaults,options);
  6. $(this).each(function(){
  7. $this=$(this);
  8. if($this.val()<100){
  9. $this.knob({
  10. width:opts.width,
  11. thickness:0.15,
  12. fgColor:'#f90',
  13. displayInput:false,
  14. readOnly:true
  15. });
  16. }else{
  17. $this.knob({
  18. width:opts.width,
  19. thickness:0.15,
  20. fgColor:'#f90',
  21. bgColor:'#f90',
  22. displayInput:false,
  23. readOnly:true
  24. });
  25. }
  26. });
  27. };

完整案例下载地址:

360云盘。。

阅读更多
个人分类: jQuery 前端效果
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭