jquery 可拖动进度条
实现这个效果怎么弄呢?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" media="screen" href="css/bootstrap.min.css">
<link rel="stylesheet" media="screen" href="css/bootstrap-slider.css">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <style type='text/css'>
/* Example 1 custom styles */
#ex1Slider .slider-selection {
background: #BABABA;
} /* Example 3 custom styles */
#RGB {
height: 20px;
background: rgb(128, 128, 128);
}
#RC .slider-selection {
background: #FF8282;
}
#RC .slider-handle {
background: red;
}
#GC .slider-selection {
background: #428041;
}
#GC .slider-handle {
background: green;
}
#BC .slider-selection {
background: #8283FF;
}
#BC .slider-handle {
border-bottom-color: blue;
}
#R, #G, #B {
width: 300px;
}
</style>
</head>
<body>
<div style="margin-top: 260px;padding-top:360px;background: #fffddd;margin: 0 auto;width: 800px;">
<!--<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14"/>-->
<div class="well">
<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="1"/>
</div>
</div> <script type="text/javascript" src="js/bootstrap-slider.js"></script>
<script>
// With JQuery
$("#ex8").slider({
tooltip: 'always'
}); // Without JQuery
// var slider = new Slider("#ex8", {
// tooltip: 'always'
// });
</script>
</body>
</html>
//赋值操作 不过有个小问题,就是界面初始化出现了输入框。。
$("#ex8").slider({
tooltip: 'always',
precision: 2,//两位小数
value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
});
DEMO:下载地址:http://download.csdn.net/detail/u012922417/9456646
参考地址:https://github.com/seiyria/bootstrap-slider
详细说明地址:http://seiyria.com/bootstrap-slider/ 2016-03-09
如果有比较好的其他方案,欢迎补充一下 谢谢!
jquery 可拖动进度条的更多相关文章
- [Android] SeekBar---可拖动进度条
SeekBar---可拖动进度条 ()setMax //设置SeekBar最大数值 ()setProgress //设置SeekBar当前数值 ()setSecondaryProgress//设置Se ...
- Android——音乐播放器完善——进度条显示当前播放进度,加可拖动进度条(未待解决完问题)
效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...
- UISlider无法拖动进度条的问题解决
UISlider无法拖动进度条的问题解决 最近业务中的视频播放使用到了UISlider,但是有一个奇怪的问题,就是在Modar出来的控制器中UISlider是可以正常使用的,但是在Push出来的控制器 ...
- android中SeekBar拖动进度条的使用及事件监听
下面和大家分享一下android中SeekBar拖动进度条的使用,以及事件监听.拖动进度条的事件监听需要实现SeekBar.OnSeekBarChangeListener接口,调用SeekBar的se ...
- Jquery实现可拖动进度条demo
html <div class="progress"> <div class="progress_bg"> <div class= ...
- jquery——彩色投票进度条
一.需求 如下图 重点是要实现进度条. 二.分析 html5新增及删除标签一文中提到过html5新增了progress标签.但是肯定有兼容性问题.生成环境不适用,所以要模拟实现. 原理:动态设置< ...
- canvas-弧形可拖动进度条
一.效果如下: See the Pen XRmNRK by pangyongsheng (@pangyongsheng) on CodePen. 链接dome 二. 本文是实现可拖动滑块实现的基本,及 ...
- JQuery实战——页面进度条效果
今早逛阮一峰大神的博客 ECMAScript 6 入门 时候看到页面顶部有个进度条显示当前浏览的进度,如图: 顶部进度条会根据当前页面高度进行宽度调整,实战一番,视觉使用animated方法实现.下面 ...
- canvas-圆弧形可拖动进度条
一.效果如下: See the Pen XRmNRK by pangyongsheng (@pangyongsheng) on CodePen. 链接dome 二. 本文是实现可拖动滑块实现的基本思路 ...
随机推荐
- 【转】让itunes下载加速的真正办法,转向至香港台湾澳门苹果服务器 -- 不错不错!!!
原文网址:http://bbs.feng.com/read-htm-tid-2397269.html 今天,看了一个这个帖子是改dns的,http://bbs.feng.com/read-htm-ti ...
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用 ...
- Android 再按一次退出程序
实现代码: private long exitTime = 0; /** * 捕捉返回事件按钮 * * 因为此 Activity 继承 TabActivity 用 onKeyDown 无响应,所以改用 ...
- wifi配置常用命令总结
1:iwlist eth1 scanning 查看无线路由 2:iwconfig eth1 essid "无线路由的名称" 3: ifconfig eth1 IP 4: route ...
- node系列4
进程管理 NodeJS可以感知和控制自身进程的运行环境和状态,也可以创建子进程并与其协同工作,这使得NodeJS可以把多个程序组合在一起共同完成某项工作,并在其中充当胶水和调度器的作用.本章除了介绍与 ...
- 6个WordPress备份插件
毫无疑问,为了保证网站的数据安全,经常备份是非常有必要的,当然手动备份比较麻烦,所以很多时候我们会使用WordPress的备份插件.Jackie Hole的<6 Top WordPress Ba ...
- WebView相关设置
//定义一个WebView的WebSetting WebSettings mWebSettings = mWebView.getSettings(); // 让网页自适应屏幕宽度 ...
- Apple LLVM 6.0 Warning: profile data may be out of date
I have no clue what this meant, so I googled the problem. I only ended up with some search results s ...
- java 访问权限控制
java提供四种访问权限: public > protected > 包访问权限(无关键词) > private 包:库单元 对于包访问权限,一个包内的都可以访问. 在eclipse ...
- hdoj 1012 u Calculate e
u Calculate e Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...