knob.js进度插件

时间：2023-03-08 17:47:45
knob.js进度插件

关于knob.js进度插件的使用

关于这个插件，妹的，第一次使用坑死爹了，各种不会，幸亏我有持之以恒的精神，最终还是让其臣服于我的胯下。。。。

1.  引入

head  部分添加knob.js，同时引入excanvas.js这个文件主要为了兼容IE7，8，具体ie6没测试（可以不考虑了）；

<script type="text/javascript" src="js/jquery.knob.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>

2. 环形样式的修改

默认样式是这样定义的；

knob.js进度插件

修改样式，改进度条的html文件是这样的；

<div class="demo">
<input class="knob" data-width="100" data-displayinput="true" data-displayprevious="true" readonly value="10" >
</div>

你只需修改类名，即可使用js来修改，如

//定义demo样式
$(" .demo2 .knob").knob({ 
'width':"38"  //环形宽度
,'height':"38"  //环形高度
,'readonly':"readonly" //只读，不允许修改
,'thickness':".1"  //环形粗细程度
});

3.关于input数值的转换，如转换成百分数，小数

这个我到现在都没弄懂，通过js直接修改原始数值，在火狐下第一次载入没问题，刷新就会出现问题。。。  （不知如何解决这个bug），我最终使用的是添加新元素，

将input隐藏掉，再将它的的value值复制给新添加的元素，在修改这个新添加元素的html()值。

默认和修改后对比：

修改前的：knob.js进度插件修改后的：knob.js进度插件

随笔分类 - Jquery

摘要: 关于这个插件，妹的，第一次使用坑死爹了，各种不会，幸亏我有持之以恒的精神，最终还是让其臣服于我的胯下。。。。1. 引入head 部分添加knob.js，同时引入excanvas.js这个文件主要为了兼容IE7，8，具体ie6没测试（可以不考虑了）；2. 环形样式的修改默认样式是这样定义的；修改样式，...阅读全文

posted @ 2014-11-14 17:43 菜的一手好代码 阅读(451) | 评论 (2) 编辑 |

摘要: 效果图：模拟滚动条 1 2 3 4 5 6阅读全文

posted @ 2014-10-18 11:36 菜的一手好代码 阅读(242) | 评论 (0) 编辑 |

摘要: 用户名： 密码：阅读全文

posted @ 2014-10-17 18:10 菜的一手好代码 阅读(9) | 评论 (0) 编辑 |

摘要: 源代码：简写后：$(function(){ $(".btn:lt(2)").each(function(i){ $(this).on("click",function(){ $(".layer:eq("+i+")").show(); }); ...阅读全文

posted @ 2014-10-11 09:48 菜的一手好代码 阅读(6) | 评论 (0) 编辑 |

摘要: js分页 这是内容标题 第1条 这是内容标题 第2条 这是内容标题 第3条 这是内容标题 第4条 这是内容标题 第5条 这是内容标题 第6条 这是内容标题 第7条 这是内容标题 第8条 ...阅读全文

posted @ 2014-10-11 09:35 菜的一手好代码 阅读(7) | 评论 (0) 编辑 |

摘要: 原文：苹果橘子菠萝1、$("li").wrap("");每一个选择器都添加苹果橘子菠萝2、$("li").wrapAll("");在所有选中的选择器最外面添加苹果橘子菠萝3、$("li").wrapInner("");为选择器的内容添加苹果>橘子>菠萝阅读全文

posted @ 2014-10-10 18:20 菜的一手好代码 阅读(7) | 评论 (0) 编辑 |

摘要: 1.window.location.href=window.location.href //刷新页面，该方法兼容各种浏览器；首先介绍两个方法的语法：reload方法，该方法强迫浏览器刷新当前页面。语法：location.reload([bForceGet])参数：bForceGet， 可选参数， 默...阅读全文

posted @ 2014-10-08 10:21 菜的一手好代码 阅读(64) | 评论 (0) 编辑 |

摘要: 大家都知道，用document.getElementById(‘element').style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。 DOM标准里有个全局方法getComputedStyl...阅读全文

posted @ 2014-09-26 13:47 菜的一手好代码 阅读(3) | 评论 (0) 编辑 |

摘要: 1、数组的创建vararrayObj=newArray();　//创建一个数组vararrayObj=newArray([size]);　//创建一个数组并指定长度，注意不是上限，是长度vararrayObj=newArray([element0[,element1[,...[,elementN]]...阅读全文

posted @ 2014-09-22 10:30 菜的一手好代码 阅读(2) | 评论 (0) 编辑 |

摘要: 1.字符串包含；var str="我爱中国";if(str.indexOf("中国")>=0){ alert("含有此字符串");}else{ alert("没有此字符串");}2.获取当前url问题；设置或获取对象指定的文件名或路径。window.location.pathname例：http...阅读全文

posted @ 2014-09-10 10:57 菜的一手好代码 阅读(9) | 评论 (0) 编辑 |

摘要: 在做一个页面的时候，网页中由许多块相同的地方 ，例如页面中会有多个地方用到TAB 效果，在使用each()遍历以后 不一定会正常显示，这是因为写的html静态页面中只有当前板块中有这个的类，若是用JS动态改变当前的类名的话，文件不一定会正常加载，因此应当使用通用的类名 ，而不应该使用当前的类名。例如...阅读全文

posted @ 2014-09-05 17:17 菜的一手好代码 阅读(7) | 评论 (0) 编辑 |

摘要: js获取日期：前天、昨天、今天、明天、后天阅读全文

posted @ 2014-09-03 18:13 菜的一手好代码 阅读(15) | 评论 (0) 编辑 |

摘要: 1.此段代码主要是解决，形如“li”的每隔几个具有规律性性个数的添加不同类名的方法。。。2.每隔三个元素；阅读全文

posted @ 2014-09-02 17:38 菜的一手好代码 阅读(6) | 评论 (0) 编辑 |

摘要: 工作中遇到的一个js代码，现在对.trigger('mouseleave')，仍一知半解。。。阅读全文

posted @ 2014-08-30 12:06 菜的一手好代码 阅读(4) | 评论 (0) 编辑 |

分类: Jquery

相关文章