关于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. 环形样式的修改
默认样式是这样定义的;
修改样式,改进度条的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进度插件
关于knob.js进度插件的使用 关于这个插件,妹的,第一次使用坑死爹了,各种不会,幸亏我有持之以恒的精神,最终还是让其臣服于我的胯下.... 1. 引入 head 部分添加knob.js,同时引 ...
- Sublime Text 2 JS 格式化插件 JsFormat的配置使用
(转自http://www.jb51.net/softjc/178401.html) 这里下载这插件包 https://github.com/jdc0589/JsFormat ,点油下角的zip就能下 ...
- Django 的css和js压缩插件:django_compressor
今天尝试了django_conpressor,一个在django框架中压缩css和js的插件,灰常有用 我把它加载在我的base的HTML template中,原来未经压缩的css和js是: < ...
- Sublime Text 2 JS 格式化插件 JsFormat
这里下载这插件包 https://github.com/jdc0589/JsFormat ,点油下角的zip就能下载插件包放到sublime安装目录的DataPackages目录中重新打开sublim ...
- Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示 免费下载 ...
- js开关插件使用
一.简介 本篇文章介绍一个比较好使用的js开关插件Switchery,该插件的样式是ios7的滑动按钮插件,并且将很多功能加入到配置项,简单.灵活,支持的绝大部分浏览器(Chrome, Firefox ...
- js写插件教程深入
原文地址:https://github.com/lianxiaozhuang/blog 转载请注明出处 js 写插件教程深入 1.介绍具有安全作用域的构造函数 function Fn(name){ t ...
- move.js运动插件
move.js 运动插件是一款针对元素动画效果的插件.可以运用此插件制作出各类元素效果. 插件GitHub地址:https://github.com/visionmedia/move.js 下面整理学 ...
- 支持移动触摸设备的简洁js幻灯片插件
lory是一款支持移动触摸设备的简洁的js幻灯片插件.该幻灯片插件可以通过纯js调用,也可以将该幻灯片插件作为jQuery插件来使用.该幻灯片的过渡动画具有硬件加速功能,并且可以定制是否使用easin ...
随机推荐
- 【BZOJ3627】【JLOI2014】路径规划 分层图
意甲冠军:要查找.有门户网站:http://www.lydsy.com/JudgeOnline/problem.php? id=3627 注意:点的等待时长示意图为: 非常清晰了吧?没事,不清晰就不清 ...
- 跟Bob大叔观OO原则
上篇总结了经典的23种 设计模式,详细的解读后期会陆续的详细揭开.使用设计模式的根本原因就是为了增强代码的复用性和可维护性.而面向对象是实现代码复用的有效途径,所以这里有必要了解一下OO的基本思想和原 ...
- java.lang.IllegalStateException: You need to use a Theme.AppCompat theme
配置: 中设置theme为 <application android:allowBackup="true" android:icon="@mipmap/ic_lau ...
- 体验VS2015正式版
初次体验VS2015正式版,安装详细过程. 阅读目录 介绍 安装 介绍 纽约时间7月20日,微软发布了vs 2015 正式版,换算到我们的北京时间就是晚上了,今天回到家里,就下下来了,装上去 ...
- C#操作Excel初探
近期一段时间正好在做winform导出Excel报表的问题,学习了一下C#操作Excel的一些方法(如:向Excel中插入图片:删除Excel指定sheet中的某行或某列,在Excel指定的单 ...
- [Oracle] Insert All神奇
无条件插入 Oracle中间insert all它指的是相同的数据组成不同的表.如果有需求现在:该t插入数据表t1,t2,假设你不知道insert all.您可以使用insert插入2次要,例如,见下 ...
- vS2010 列表控件 加入右键菜单
1.首先,就需要信息加入权限控制,例如,下面的对话框弹出 2,例如以下图选择须要的消息响应,这里选择NM_RCLICK 消息. 3,加入例如以下代码 </pre><pre name= ...
- vb.net窗口继承(房重建知识汇总)
在项目的开发,我们经常会遇到特殊的相界面似窗户,然后,我们将能够使用继承的窗口.透过窗户下面简单的例子来实现继承. 1.创建父窗口Form1 2.把须要重写的事件改为Overridable,将priv ...
- my97 日期控件
官网:http://www.my97.net/ 好多广告啊! 文档地址: http://www.mysuc.com/test/My97DatePicker/
- C#特性和反射
C#特性和反射 .NET编译器的任务之一就是为所有定义和引用的类型生成元数据描述.除了程序集中标准的元数据外,.NET平台还支持特定(attribute)把更多的元数据嵌入到程序集中. .NET特性扩 ...