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进度插件_第1张图片

修改样式,改进度条的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进度插件_第2张图片修改后的:knob.js进度插件_第3张图片

 

 

随笔分类 - 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

你可能感兴趣的:(js)